如何在 React.Fragment 中通过 ID 获取元素？

Question

我试图在 React 中使用 ID 捕获元素，但我做不到。

 render() {
  //Looping through all menus
  let menuOptions = this.props.menuLists.map(menuList => {
    return (
      <li className="nav-item active" key={menuList.name}>
        <a className="nav-link" href={menuList.anchorLink}>
          {menuList.name}
        </a>
      </li>
    );
  });

  return (
    <React.Fragment>
      <div id="animSec">
        <canvas id="myCanvas" />
      </div>
    </React.Fragment>
  );
}

我想调用 myCanvas ID。

我尝试了 this.refs ，但它给我发送了 undefined 。我也试过 react-dom ：

 ReactDOM.findDOMNode(this.refs.myCanvas);

但什么也得不到。我先在构造函数上调用 findDOMNode 然后我尝试了 componentDidMount 但什么也没得到。

原文由 sayalok 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 回调 引用来检索 ID：

 class YourComponent extends React.Component {
  constructor(props) {
    super(props)
    this.canvas = null
  }

  componentDidMount() {
    console.log(this.canvas.id) // gives you "myCanvas"
  }

  render() {
    return (
      <React.Fragment>
        <div id="animSec">
          <canvas id="myCanvas" ref={c => {this.canvas = c}}></canvas>
        </div>
      </React.Fragment>
    )
  }
}

---

_或者_，对于 React v16.3+，您可以使用 createRef() ：

 constructor(props) {
    super(props)
    this.canvas = React.createRef()
  }

  componentDidMount() {
    console.log(this.canvas.current.id) // gives you "myCanvas"
  }

  render() {
    return (
      <React.Fragment>
        <div id="animSec">
          <canvas id="myCanvas" ref={this.canvas}></canvas>
        </div>
      </React.Fragment>
    )
  }

原文由 Liren Yeo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您在构造函数中将 ref 设置为 this.canvasRef = React.createRef() 并将其应用于您的画布

<React.Fragment>
  <div id="animSec">
    <canvas ref={this.canvasRef}></canvas>
  </div>
</React.Fragment>

您应该能够直接访问该元素。您可以控制台日志或检查您的开发工具来查看 ref 值。并且（据我所知），与 React 中的 querySelectors 相比，使用 Refs 是最佳实践。您也可以查看 这篇文章，看看是否可以使用画布上的方法。

原文由 Ryan Brockhoff 发布，翻译遵循 CC BY-SA 4.0 许可协议