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，但一无所获。

Answer 1

您可以使用Callback Refs来获取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>
    )
  }

Answer 2

您可以尝试在自定义函数或任何生命周期方法中使用document.getElementById('myCanvas')来定位所需的元素。
请注意，如果您正在使用next.js之类的框架进行SSR，则该方法将无效，因为服务器中没有文档对象。

Answer 3

如果您在构造函数中将ref设置为this.canvasRef = React.createRef（）并将其应用到您的画布上

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

您应该可以直接访问该元素。您可以控制台日志或检查您的开发工具以查看参考值。并且（据我所知），与Ref中的querySelectors相比，使用Refs是最佳实践。您还可以查看this post，看看是否可以在画布上使用方法。

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

3 个答案: