React的ref是怎样调用其他元素？

一、什么是 ref

ref 可以理解为指向React 元素的变量，方便其他组件访问这个React元素。

---

二、class组件使用ref

1、createRef : class组件

通过ref ，访问class组件。

class CustomTextInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = { text: "" };
    }

    setTextInput(text) {
        this.setState({ text: text });
    }

    render() {
        return (<input type="text" value={this.state.text} onChange={() => { }} />);
    }
}

class SetTextInput extends React.Component {
    constructor(props) {
        super(props);
        this.textInput = React.createRef();
    }

    componentDidMount() {
        this.textInput.current.setTextInput("测试");
    }

    render() {
        return (<CustomTextInput ref={this.textInput} />);
    }
}

2、createRef : dom元素

通过ref，访问React元素。

// 使用 ref 调用 input 元素的 focus 方法
class CustomTextInput extends React.Component {
    constructor(props) {
        super(props);
      	// 1、创建 ref
        this.textInput = React.createRef();
    }
		// 3、使用 ref 访问元素
    componentDidMount() {
        this.textInput.current.focus();
    }
		// 2、将元素的 ref属性 与 创建的ref 进行关联
    render() {
        return (
            <input type="text" ref={this.textInput} />
        );
    }
}

---

三、函数组件中使用ref

1、无法使用 ref 属性

// 错误案例：
function MyFunctionComponent() {
   
    return <input />;
}

class Parent extends React.Component {
   
    constructor(props) {
   
        super(props)