访问反应组件的根元素

Question

如果我在render()反应组件的功能中有以下内容

return <div ref="myId"></div>;

我知道我可以在反应代码中访问div元素this.refs.myId.但是如果ref元素没有在div元素中定义,那么我是否有另一种方法来获取div元素的句柄,因为它是组件的根元素？

Answer 1

您可以使用ReactDOM(https://www.npmjs.com/package/react-dom)获取组件的根元素ReactDOM.findDOMNode(this)

Answer 2

上面的答案已被弃用，转而使用该forwardRef属性。现在应该有一种机制（意味着您必须创建它）使用forwardRef函数将根节点转发到父节点，如下所示

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

https://reactjs.org/docs/forwarding-refs.html