react获取ref的值为undefined

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 结点是否已被定义：

const { keyPersonnelChart } = this.refs
if ( xxx !== undefined) {
	// do something
}

2、不要在 render() 中 return(DOM结构) 之前使用 return false 语句，延伸出 不要在父级检测数据的合法性，直接将这一步放到子组件中进行。例如：

render() {
    if ( !this.props.data ) {
        return false
    }
    
    return (
    	<div ref='xxx'></div>
    )
}