#### 1、問題描述 在 render() 里面某個DOM 結點上定義了 ref='xxx' 后，在生命周期里面使用 this.refs.xxx 獲取 xxx 結點，控制臺報錯 xxx 結點 undefined。 #### 2、原因分析  根據 react 的機制（見上圖），render() 方法執行后會進入生命周期 componentDidMount 中，正常情況下在 componentDidMount 中可以使用 this.refs.xxx 獲取在 render() 中定義的 ref 屬性，但是這里出現了 undefined ，即 this.refs.xxx 的值為 undefined。 為什么會出現這樣的情況呢？ 在 render() 內，rerutn（DOM結構）之前有一句 return false，導致在 DOM 中定義的 ref='xxx' 沒被渲染，故而 react 取不到 xxx 的值（主要是在檢測數據的合法性方面會導致這個問題） #### 3、解決方案 1、 在 componentDidMount 中取值時檢測一下 xxx 結點是否已被定義： ```javascript const { keyPersonnelChart } = this.refs if ( xxx !== undefined) { // do something } ``` 2、不要在 render() 中 return(DOM結構) 之前使用 return false 語句，延伸出 不要在父級檢測數據的合法性，直接將這一步放到子組件中進行。例如： ```javascript render() { if ( !this.props.data ) { return false } return ( <div ref='xxx'></div> ) } ```