React-组件-Ref转发

获取函数式组件中的元素

如果要获取的不是函数式组件本身, 而是想获取函数式组件中的某个元素，那么我们可以使用 Ref 转发 来获取。

在之前的文章当中演示了通过 Ref 获取函数式组件，但是在控制台报了一个警告，警告的内容如下：

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

意思就是告诉我们函数式组件不能够使用 Ref 你可能是想使用 React.forwardRef()，React.forwardRef() 是什么呢，它是一个高阶组件，是一个高阶函数，我们可以通过它来创建一个组件，通过它创建出来的组件就可以把外界设置的 Ref 传递给函数式组件的内部，然后在函数式内部通过这个传递过来的 Ref 进行获取函数式组件当中的元素即可。不管三七二十一，现在直接上代码：

import React from "react";

const About = React.forwardRef((props, myRef) => {
    return (
        <div ref={myRef}>
            <p>我是段落</p>
            <span>我是span</span>
        </div>
    )
});

class App extends React.PureComponent {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }

    render() {
        return (
            <div>
                <About ref={this.myRef}/>
                <button onClick={() => {
                    this.btnClick()
                }}>APP按钮
                </button>
            </div>
        )
    }

    btnClick() {
        console.log(this.myRef.current);
    }
}

export default App;