如何在React中选择DOM元素

Question

当我尝试使用'querySelector'或'getElementById'来选择DOM元素时，我得到的是Error: Value is null vs document.body，它工作得很好。如果我做错了什么，请让我知道。

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不是这样工作的，你需要使用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

虽然上面的语句使用了queryselector和getElementById，但它们无法找到匹配的lelement，因为尚未调用呈现函数。

相反，文档体已经定义并呈现，因此它不返回null值。作为一种解决办法，您可以这样做：

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}
    );
  }
}