将DOM元素作为React中的prop传递

Question

所以我有一个组件需要一个作为prop传入的DOM元素.我试图在另一个组件中使用它,如下所示:

    <div>
        <div className="myPropDiv" ref="myPropDiv">...</div>
        <CustomComponent view={ this.refs.myPropDiv } />
    </div>

但这不起作用,因为(我怀疑)DOM还没有在我正在调用的点上呈现this.refs.myPropDiv.我将如何完成这样的事情？

Answer 1

您无法直接访问 DOM，但可以使用 访问 React 组件的 DOM 元素ReactDOM.findDOMNode(component)，因此要在调用中使用它，componentDidMount您可以使用：

var MyComponent = React.createComponent({
  ...
  componentDidMount: function() {
    var component = this,
      node = ReactDOM.findDOMNode(component);
  }
  ...
});

然后，如果您正在查找该父 DOM 节点的子节点，则可以从该节点正常遍历 DOM，例如：

var childNode = node.querySelectorAll('.child-node-class')[0];

然后你可以将它传递到你原来想要的任何地方。