React的Ref功能

• 1.String Ref
• 2.Callback Ref
• 3.Create Ref
• 4.useRef
• 5 不同渲染週期之間的資料共享
• 6 各方式使用總結
• 7 Ref轉發

1.String Ref

String Ref是個過時的API。因為String型別的Ref存在一些問題，將在未來的某個版本中被遺棄，不建議使用。

使用方式：this.refs.XXX獲取DOM元素節點：

獲取普通標籤：

import React, { Component } from 'react';
class App extends Component {
    componentDidMount() {
        console.log('this.refs.XXX');
        console.log(this.refs.h1Ref);
    }
    render() {
        return <h1 ref='h1Ref'>Hello World!</h1>
    }
}
export default App;
 

複製程式碼列印結果：

this.refs.xxx
<h1>Hello World!</h1>

獲取react元件：此時可以呼叫元件上的方法

import React, { Component } from 'react';
class App extends Component {
    componentDidMount() {
        console.log(this.refs.childRef);
        this.refs.childRef.handleLog(); // Child Component    }
    render() {
        return (
            <div>
                <h1>Hello World!</h1>
                <Child ref='childRef' count='1' />
            </div>
        )
    }
}
class Child extends Component {
    handleLog = () => {
        console.log('Child Component');
    }
    render() {
        const { count } = this.props;
        return <h2>count: { count }</h2>
    }
}
export default App
 

// 結果
元件的引用，包括上面掛載的函式和元件props等