react 中,如何传递当前dom节点给子组件
时间: 2024-03-02 18:48:33 浏览: 20
在React中,可以通过ref来获取DOM节点,并将其传递给子组件。ref是一个特殊的属性,在组件加载后可以获取组件的实例或者DOM元素。
例如,可以定义一个父组件,使用ref来获取子组件的DOM节点,并将其传递给子组件:
```
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.childRef = React.createRef();
}
render() {
return (
<div>
<ChildComponent ref={this.childRef} />
</div>
);
}
}
```
在子组件中,可以通过props来获取父组件传递的ref,并从中获取DOM节点:
```
class ChildComponent extends React.Component {
componentDidMount() {
console.log(this.props.forwardRef.current); // 获取父组件传递的DOM节点
}
render() {
return <div>Child Component</div>;
}
}
export default React.forwardRef((props, ref) => <ChildComponent {...props} forwardRef={ref} />);
```
这里使用了React.forwardRef()函数来将ref传递给子组件。需要注意的是,forwardRef函数需要返回一个函数式组件,并将ref作为最后一个参数进行传递。
这样,就可以在子组件中获取到父组件传递的DOM节点,并进行相应的操作。