Question

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

    <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访问。

Answer 2

您无法直接访问DOM，但您可以使用ReactDOM.findDOMNode(component)访问具有componentDidMount的React组件的DOM元素，因此要在var MyComponent = React.createComponent({ ... componentDidMount: function() { var component = this, node = ReactDOM.findDOMNode(component); } ... });调用中使用它，您可以使用它：

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

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

function foo()
  return 1
end

local result = foo() -- foo is numeric 1

function foo()
  return {1,2,3}
end
local result1, result2, result3 = foo()
local result = foo() -- this is bad as result is `1` but `2` and `3` are lost

function foo()
  return 1, 2, 3
end
local result = foo() -- foo is a table with all the numbers, that's ok

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

在反响

2 个答案: