使用React.findDOMNode
v0.13.0 中引入的方法,我能够获取通过映射传递到父组件的每个子组件的 DOM 节点this.props.children
。
然而,如果一些孩子碰巧是 React 元素而不是组件(例如,其中一个孩子是<div>
通过 JSX 创建的),React 会抛出一个不变违规错误。
有没有办法在挂载后获取每个子节点的正确 DOM 节点,而不管子节点是什么类?
使用React.findDOMNode
v0.13.0 中引入的方法,我能够获取通过映射传递到父组件的每个子组件的 DOM 节点this.props.children
。
然而,如果一些孩子碰巧是 React 元素而不是组件(例如,其中一个孩子是<div>
通过 JSX 创建的),React 会抛出一个不变违规错误。
有没有办法在挂载后获取每个子节点的正确 DOM 节点,而不管子节点是什么类?
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]
,并通过检索它们的 DOM 节点ReactDOM.findDOMNode(this.refs[childIdx])
。
如果您想访问任何 DOM 元素,只需添加ref
属性即可直接访问该元素。
<input type="text" ref="myinput">
然后你可以直接:
componentDidMount: function()
{
this.refs.myinput.select();
},
ReactDOM.findDOMNode()
如果您已将 a 添加ref
到任何元素,则无需使用。
你可以使用新的React ref api来做到这一点。
function ChildComponent({ childRef }) {
return <div ref={childRef} />;
}
class Parent extends React.Component {
myRef = React.createRef();
get doSomethingWithChildRef() {
console.log(this.myRef); // Will access child DOM node.
}
render() {
return <ChildComponent childRef={this.myRef} />;
}
}
React.findDOMNode(this.refs.myExample)
在另一个答案中提到的已被弃用。
使用ReactDOM.findDOMNode
来自'react-dom'
代替
import ReactDOM from 'react-dom'
let myExample = ReactDOM.findDOMNode(this.refs.myExample)