#### 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> ) } ```