如何在React中访问DOM元素？什么是React中document.getElementById（）的等效项

如何在React中访问DOM元素？什么是React中document.getElementById（）的等效项

您可以通过指定

ref

编辑：

在 React 16.3+中 ，用于

React.createRef()

创建引用：

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

为了访问元素，请使用：

const node = this.myRef.current;

使用React.createRef（）的DOC

---

编辑

但是，facebook建议不要这样做，因为字符串引用存在一些问题，被认为是旧问题，并且很可能在将来的发行版中被删除。

从文档：

旧版API：字符串引用

如果您以前使用过React，那么您可能会熟悉一个较旧的API，其中ref属性是一个字符串，例如“
textInput”，并且可以通过this.refs.textInput访问DOM节点。我们建议不要这样做，因为字符串引用存在一些问题，被认为是旧问题，并且很可能在将来的发行版中删除。如果您当前正在使用this.refs.textInput访问引用，则建议改用回调模式。

对于 React 16.2和更早版本， 推荐的方法是使用回调模式：

<Progressbar completed={25} id="Progress1" ref={(input) => {this.Progress[0] = input }}/><h2 ></h2><Progressbar completed={50} id="Progress2" ref={(input) => {this.Progress[1] = input }}/>  <h2 ></h2><Progressbar completed={75} id="Progress3" ref={(input) => {this.Progress[2] = input }}/>

DOC使用回调

---

甚至旧版本的react定义的引用都使用如下字符串

<Progressbar completed={25} id="Progress1" ref="Progress1"/>    <h2 ></h2>    <Progressbar completed={50} id="Progress2" ref="Progress2"/>      <h2 ></h2>    <Progressbar completed={75} id="Progress3" ref="Progress3"/>

为了得到元素就做

var object = this.refs.Progress1;

记住要

this

在箭头功能块内使用，例如：

print = () => {  var object = this.refs.Progress1;  }

等等…