时间戳

首页 > 解决方案 > 如何在 React.Fragment 中通过 ID 获取元素？

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

问题描述

我试图在 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但什么也没得到。

标签： javascriptreactjs

解决方案

您可以使用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>
    )
  }

推荐阅读