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

【问题标题】：Pass DOM Element as a prop in React在 React 中将 DOM 元素作为道具传递
【发布时间】：2016-04-29 04:43:42
【问题描述】：

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

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

但这不起作用，因为（我怀疑）在我调用 this.refs.myPropDiv 的时候 DOM 还没有被渲染。我将如何完成这样的事情？

【问题讨论】：

不要那样做，您将子组件与其父组件紧密耦合。相反，触发一个事件或创建一个回调，以便父组件可以做出相应的响应。您应该说明您打算如何使用它，以便我们提供更全面的解决方案

标签： javascript dom reactjs

【解决方案1】：

在大多数情况下，这不是一个好主意，至少看起来不像是遵循 React 的方式。

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

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

<CustomComponent> <div className="myPropDiv" ref="myPropDiv">...</div> </CustomComponent>

然后，您可以在 CustomComponent 中以 props.children 的形式访问该 div。

【讨论】：

【解决方案2】：

您不能直接访问 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];

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

【讨论】：