React中的Refs属性你来了解吗

class Refs extends React.Component {
    constructor(props) {
        super(props);
        // 在构造函数中初始化一个ref，然后在return中就可以使用了
        this.myRef = React.createRef();
        console.log(this.myRef);
    }
    componentDidMount() { // 在render()函数执行完成后调用
        this.myRef.current.innerHTML = "橘猫吃不胖"; // this.myRef中有一个current属性
    }
    render() {
        return (
            <div>
                {/*如果ref属性被用于html，那么它的值就是底层DOM元素*/}
                <div ref={this.myRef}></div>
            </div>
        );
    }
}

class Refs extends React.Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }
    componentDidMount() {
        // 在父组件中调用了子组件的方法
        this.myRef.current.change();
    }
    render() {
        return <Children ref={this.myRef}/>
    }
}

class Children extends React.Component {
    change() {
        console.log("橘猫吃不胖变身");
    }
    render() {
        return <span>橘猫吃不胖</span>
    }
}

class Refs extends React.Component {
    constructor(props) {
        super(props);
        this.targetRef = null;
        this.myRef = (e) => this.targetRef = e;
    }
    componentDidMount() {
        console.log("this.refs" + this.refs.container);
    }
    render() {
        return <div ref={this.myRef}>
            橘猫吃不胖
        </div>
    }
}

class Refs extends React.Component {
    constructor(props) {
        super(props);
        this.targetRef = null;
        this.myRef = (e) => this.targetRef = e;
    }
    componentDidMount() {
        console.log("this.refs" + this.refs.container);
    }
    render() {
        return <div ref={this.myRef}>
            橘猫吃不胖
        </div>
    }
}

function HookRef(props) {
    const inputElement = useRef();
    return (
        <div>
            <input ref={inputElement}/>
            <button onClick={() => {
                inputElement.current.focus()
            }}>获得焦点
            </button>
        </div>
    )
}