从React子元素获取DOM节点
使用React.findDOMNode
中引入的React.findDOMNode
方法,我可以通过在this.props.children
进行映射来this.props.children
传递给父级的每个子组件的DOM节点。
但是,如果某些孩子碰巧是React元素而不是组件(例如其中一个孩子是通过JSX创build的<div>
),则React会引发一个不变的违规错误。
是否有一种方法来获得每个孩子正确的DOM节点后,不pipe孩子是什么类?
this.props.children
应该是ReactElement或ReactElement的数组,但不是组件。
为了获得子元素的DOM节点,你需要克隆它们并为它们分配一个新的ref。
render() { return ( <div> {React.Children.map(this.props.children, (element, idx) => { return React.cloneElement(element, { ref: idx }); })} </div> ); }
然后可以通过this.refs[childIdx]
访问子组件,并通过ReactDOM.findDOMNode(this.refs[childIdx])
检索它们的DOM节点。
如果你想访问任何DOM元素,只需添加ref
属性,你就可以直接访问该元素。
<input type="text" ref="myinput">
然后你可以直接:
componentDidMount: function() { this.refs.myinput.select(); },
他们不需要使用ReactDOM.findDOMNode()
,如果你已经添加了一个ref
的任何元素。
这可能是通过使用refs属性。
在想要达到<div>
的例子中,你想要做的就是使用<div ref="myExample">
。 然后,您将能够通过使用React.findDOMNode(this.refs.myExample)
来获取该DOM节点。
从那里得到每个孩子的正确的DOM节点可能就像这个简单的映射this.refs.myExample.children
(我还没有testing过),但你至less可以抓住任何特定的装载的子节点ref属性。
以下是有关参考资料的官方反应文档,以获取更多信息。
React.findDOMNode(this.refs.myExample)
在另一个答案中提到已经deprectaed。
ReactDOM.findDOMNode
使用'react-dom'
ReactDOM.findDOMNode
import ReactDOM from 'react-dom' let myExample = ReactDOM.findDOMNode(this.refs.myExample)