如何在 React 中 select DOM 元素

Question

When I am trying to use 'querySelector' or 'getElementById' to select a DOM element I am getting Error: Value is null vs document.body that works just fine. Pls let me know if I am doing something wrong.

import React, { Component } from 'react';
import './main.styles.scss';
import { createChart } from 'lightweight-charts';

// const twoC = document.getElementById('twoCharts');
// const twoC = document.querySelector('.twoC');
// const body = document.body;
const twoC = document.querySelector('#twoCharts'); 

const chart = createChart(twoC, {
  width: 1200,
  height: 600,
});

class Main extends Component {
  render() {
    return (
      <div className="main">
        <div className="trading">
          <div className="box one">1</div>
          <div className="box twoC" id="twoCharts"></div>
        </div>
        <div className="charts">
          <div className="box three">3</div>
          <div className="box four">4</div>
        </div>
      </div>
    );
  }
}

export default Main;

Answer 1

React doesnt work that way, youll need to use a ref: https://reactjs.org/docs/refs-and-the-dom.html

import React, { Component, createRef } from 'react';
import './main.styles.scss';
import { createChart } from 'lightweight-charts';

const chart = createChart(twoC, {
  width: 1200,
  height: 600,
});

class Main extends Component {
  // Create the ref
  ref = createRef();
  
  componentDidMount() {
    // After the first render
    console.log(this.ref.current); // Gets the current HTML element thats rendered
  }

  render() {
    return (
      <div className="main">
        <div className="trading">
          <div className="box one">1</div>
          // Set the ref on this element
          <div className="box twoC" id="twoCharts" ref={this.ref}></div>
        </div>
        <div className="charts">
          <div className="box three">3</div>
          <div className="box four">4</div>
        </div>
      </div>
    );
  }
}

export default Main;

Answer 2

While your statements above are using queryselector and getElementById are correctly written, they are unable to find a matching lelement because the render function has not yet been called.

On the contrary, the document's body is already defined and rendered, hence it does not return a null value. What you could do as a workaround is this:

import React, { Component } from 'react';
import './main.styles.scss';
import { createChart } from 'lightweight-charts';

const body = document.body;

const chart = createChart(body, {
  width: 1200,
  height: 600,
});

class Main extends Component {
  const one,two,three;
  getElements = () => {
  
   this.one = document.getElementById('twoCharts');
   this.two = document.querySelector('.twoC');
   this.three = document.querySelector('#twoCharts');
   //do something
  }
  render() {
    return (
      <div className="main">
        <div className="trading">
          <div className="box one">1</div>
          <div className="box twoC" id="twoCharts"></div>
        </div>
        <div className="charts">
          <div className="box three">3</div>
          <div className="box four">4</div>
        </div>
      </div>
      {this.getElements}
    );
  }
}