Question

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

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

我知道我可以使用this.refs.myId访问我的反应代码中的div元素。但是如果在div元素中没有定义ref属性，那么我是否有另一种方法来获取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

访问反应组件的根元素

2 个答案: