在 React 中,你可以使用 ref
来获取子组件的实例。以下是一些使用 ref
获取子组件实例的常见方法:
使用createRef
函数
import React, { createRef } from 'react';export default class ParentComponent extends React.Component {childRef = createRef()componentDidMount () {// 子组件实例console.log(this.childRef.current,'类组件Ref')this.childRef.current.addPerson()}render () {return <ChildComponent ref={this.childRef} />}
}class ChildComponent extends React.Component {state = {personList: ['张三', '李四']}addPerson () {console.log('添加一个人')}render () {return <div>Hello World</div>}
}
请注意,如果子组件是函数式组件,则需要使用
forwardRef
来包装子组件,以便能够正确地传递ref
。
在 React 中,如果子组件是函数式组件,你可以使用 forwardRef
来包装子组件,以便能够正确地传递 ref
。以下是一个示例:
import React, { forwardRef, useImperativeHandle } from 'react'const ChildComponent = forwardRef((props, ref) => {const [count,setCount] = React.useState(0)// 暴露给父组件的属性---ref是必须项useImperativeHandle(ref, () => ({count,addCount}))const addCount = () => {setCount(count => count + 1)}return (<div><button onClick={addCount}>改变值</button><h1>函数子组件----{count}</h1></div>)
})export default class ParentComponent extends React.Component {childRef = React.createRef()componentDidMount () {console.log(this.childRef, '函数子组件')this.childRef.current.addCount()}render () {return (<ChildComponent ref={this.childRef} />)}
}
在这个例子中,ChildComponent
是一个函数式组件,使用 forwardRef
包装后,我们可以访问传递给 ChildComponent
的 ref
,通过暴露(useImperativeHandle函数),在 ParentComponent
中就可以通过 this.childRef.current
访问子组件实例了。