react中forward ref的使用

zhener09

于 2019-12-08 22:22:20 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/sinat_41747081/article/details/103450147

本文介绍了一种称为Refforwading的技术，该技术允许React组件自动将ref传递给其子组件。通过演示代码，展示了如何使用forwardRef使父组件能够直接访问和操作子组件的DOM节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所谓Ref forwading，则是一种凭借组件向子组件自动传递ref 的一门技术。下面是一个测试demo

import React, { createRef, forwardRef } from 'react';
import './index.less';
const InputTest = forwardRef((props, ref) => (
    <input type="text" ref={ref} name="test" />
));
export default class Footer extends React.Component {
    constructor(props) {
        super(props);
        this.ref = createRef(null);
    }

    componentDidMount() {
        const { current } = this.ref;
        current.placeholder = '默认值';
        current.value = '1';
        current.focus();
    }
    render() {
            return (
               <InputTest ref={this.ref} />
            )
    }
}

如果InputTest不通过forwardRef是获取不到ref的。
结果：
在这里插入图片描述