javascript - 在 React 中将 DOM 元素作为 Prop 传递

Question

所以我有一个组件需要一个 DOM 元素作为 prop 传入。我正在尝试像这样在另一个组件中使用它:

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

但这不起作用，因为(我怀疑)在我调用 this.refs.myPropDiv 时 DOM 尚未呈现。我将如何完成这样的事情？

Answer 1

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

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

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

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

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