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

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

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

// 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吗？

如何获取孩子的DOM节点

2 个答案: