25 Refs转发机制与在高阶组件中的使用

最新推荐文章于 2023-02-13 16:46:52 发布

Stephy_Yy

最新推荐文章于 2023-02-13 16:46:52 发布

阅读量342

点赞数

分类专栏：系统学习 # react 文章标签： react.js

本文链接：https://blog.csdn.net/weixin_43503511/article/details/120735894

版权

本文探讨了在React.js中如何将子节点的ref暴露给父节点，以及在16.3及以上版本和16.2及以下版本中Refs的转发机制，包括props传递、回调方法、父组件回调等不同方式。同时，介绍了在高阶组件中如何实现Refs的转发，以及使用过程中需要注意的事项。

摘要由CSDN通过智能技术生成

将子节点的ref暴露给父节点

16.3以上 Refs转发，将ref自动通过组件传递给子组件

1. 在父组件创建ref对象
2. 给子组件赋值ref
3. 通过React.forward向子组件转发ref属性
4. 父组件的ref对象指向子组件dom
5. ref参数只有在 React.forwardRef 组件内定义时可接受

const MyInput = React.forwardRef((props, ref) =>
    <input type="text" placeholder={
   props.placeholder} ref={
   ref} />
)
class App extends React.Component {
   
    constructor(props) {
   
        super(props)
        this.refInApp = React.createRef()
    }
    componentDidMount() {
   
        console.log('【APP】componentDidMount', this.refInApp)
    }
    inputOperate = () => {
   
        const oInput = this.refInApp.current
        oInput.focus()
    }
    render() {
   
        return (
            <>
                <MyInput ref={
   this.refInApp} placeholder="请输入" />
                <button onClick={
   this.inputOperate}>聚焦</button>
            </>
        )
    }
}
ReactDOM.render(
    <App />,
    document.getElementById('app')
)