Javascript 在React中将DOM元素作为道具传递

所以我有一个组件需要一个DOM元素作为道具传入。我试图在另一个组件中使用它，例如：

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

...

---

但这不起作用，因为（我怀疑）DOM在我调用this.refs.myPropDiv时没有被呈现。我如何实现这样的功能？

您不能直接访问DOM，但可以通过

ReactDOM.findDOMNode（component）

访问React组件的DOM元素，因此要在

componentDidMount

调用中使用它，您可以使用：

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

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

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

---

然后，您可以将它传递到您最初想要的任何地方。

在大多数情况下，这不是一个好主意，至少它看起来不像是按照反应方式进行的

首先，通过refs获得该div，您不会获得DOM元素，而是该div的后台实例。您可以获得DOM元素，就像toomanyredirects建议的那样

你到底想达到什么目的？React的一个优点是您不必弄乱原始DOM，而是使用虚拟DOM。如果只想在组件中显示该div，请按如下方式传递它

...

---

然后，您可以作为props.children访问CustomComponent中的div。

不要这样做，您将子组件与其父组件紧密耦合。相反，激发事件或创建回调，以便父组件可以相应地响应。您应该解释您计划如何使用它，以便我们能够提供更彻底的解决方案