ReactJS，是否可以在不使用document.getElementbyId的情况下引用另一个组件中的对象？

Question

我正在创建一个显示图表并加载图表的应用程序，我需要编写以下代码行：

const line_chart = new GoogleCharts.api.visualization.LineChart(document.getElementById('chart-div'));
line_chart.draw(data, options);

此chart-div在另一个名为<ChartComponent/>的组件中。 可以不使用chart-div来访问document.getElementById吗？

Answer 1

您可以使用react refs并将引用通过props。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

https://reactjs.org/docs/refs-and-the-dom.html