Блог

как преобразовать получаемый элемент с помощью querySeletor для добавления div с ref document.querySelector для использования react hooks

 import ReactDOM from "react-dom";
    import h337 from "heatmap.js";
    import "./styles.css";
    
    function App() {
    
      useEffect(() => {
        var heatmapInstance = h337.create({
          // only container is required, the rest will be defaults
          container: document.querySelector('.App')
        });
        // now generate some random data
        var points = [];
        var max = 0;
        var width = 840;
        var height = 400;
        var len = 200;
    
        while (len--) {
         var val = Math.floor(Math.random()*100);
         max = Math.max(max, val);
         var point = {
          x: Math.floor(Math.random()*width),
          y: Math.floor(Math.random()*height),
          value: val
         };
         points.push(point);
       }
       // heatmap data format
      var data = {
        max: max,
        data: points
      };
      // if you have a set of datapoints always use setData instead of addData
      // for data initialization
      heatmapInstance.setData(data);
     })
    
    
    
      return (
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
        </div>
      );
    }
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);
  

как преобразовать получаемый элемент с помощью querySeletor для добавления div с ref document.querySelector для использования react hooks

 const appRef = React.useRef();

...

<div className="App" ref={appRef}>
  

А затем можно получить элемент DOM (такой же, как document.querySelector(‘.App’)):

 appRef.current 
  

Ваше приложение отображается быстрее, чем вы пытаетесь получить к нему доступ. Вам нужно добавить небольшие изменения в useEffect hook:

 useEffect(() => {
  if(appRef.current) {
    ...your code here
  }
}, [appRef])
  

В этом случае ваш код запускается только после того, как элемент DOM будет смонтирован.