React中無狀態組件是無法通過ref獲取的

02-19

在React中，無法使用refs獲取無狀態組件，因為無狀態組件掛載時，只是方法調用，沒有新建實例。

const Test = (props) => { return <div>{props.children}</div> } export default class App extends Component { componentDidMount() { console.log(this.test) } render() { return ( <Test ref={(test) => {this.test = test}}>hello world</Test> ) }}

上面的寫法大家可以自己做測試，直接會拋異常。

可是，有的時候，必須要獲取到無狀態組件的Dom怎麼辦呢？

很簡單，你可以在外層做一次包裹，代碼如下：

const Test = (props) => { return <div>{props.children}</div>}export default class App extends Component { componentDidMount() { console.log(this.test) } render() { return ( <div ref={(test) => {this.test = test}> <Test>hello world</Test> </div> ) } }

這樣在無狀態組件外層包裹一個元素就可以獲取到內部Dom了，當然現在React是不推薦大家直接用字元串的形式來創建ref的，使用上面的函數是更為推薦的形式。

ref的作用一般有兩個，一個是獲取Dom，另外一個就是父組件使用ref來獲取子組件，從而調用子組件的方法～

補充：

孟禿提出的方案很有意思，我大概用代碼實現了一下：

父組件：

class App extends Component { render() { return ( <Child ref1={(element) => this.element = element}></Child> ); } componentDidMount() { console.log(this.element) }}

子組件：

export default ({ref1}) => { return <div ref={ref1}>Example</div>}

如果ref1能夠被替換成ref，那麼這種方案更加完美，但是問題是，父組件中的ref對應的函數，子組件的props接收不到，所以導致代碼只能寫成這樣，這部分內容大家如果有更優方案，可以留言。