reactjs - 如何获取孩子的DOM节点

Question

我想访问父组件中定义的子组件的 DOM 节点。在下面的示例中，我尝试了“try1”和“try2”两种方法，但都不起作用。如何获取“theDiv”参考的 DOM 节点？

<Form>
    <Frame>
        <div ref="thediv" />
    </Frame>
</Form>

Form.render() {
    return (
       <Frame>
           <div ref="theDiv" />
       </Frame>
}

try1.Frame.componentDidMount() {
    let theDiv = ReactDOM.findDOMNode(this.refs.theDiv);
}

try2.Frame.componentDidMount() {
    React.Children.forEach(this.props.children, child => {
       if (child.ref === "theDiv") {
           let theDiv = ReactDOM.findDOMNode(child);
       }
    });
}

Answer 1

解释为什么要这样做可能会更有帮助？

现在，您可以使用refprop 来获取对元素的引用，然后通过回调将其传回父级。

// Parent Component
onChildLoad(element) {
  // do stuff here
},
render() {
  return (
    <Child onChildLoad={loadedChild}>
      // ...
    </Child>
  );
}

// Child Component
render() {
  return (
    <div ref={this.props.onChildLoad}></div>
  );
}

Answer 2

DOM节点不就是this.refs.theDiv吗？