通过DOM元素作为道具在React

所以我有一个组件需要一个DOM元素作为道具传入。我试图用它在另一个组件，像这样：通过DOM元素作为道具在React

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

但是，这并不工作，因为（我怀疑）的DOM还没有在我打电话this.refs.myPropDiv点被渲染。我将如何完成这样的事情？

来源

2016-01-22 andy

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

你不能直接访问DOM，但你可以访问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];

然后，你可以把它传递给无论你本来想它。

来源

2016-01-22 15:02:36 toomanyredirects

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

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

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

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

然后，您可以访问该分区的CustomComponent为props.children内。

来源

2016-01-22 16:21:16

通过DOM元素作为道具在React

回答

相关问题