this.refs.something返回"undefined"

Question

我有一个ref已定义的元素,最终会被渲染到页面中:

    <div ref="russian" ...>
       ...
    </div>

我想访问DOM元素属性offset...或类似的东西.但是,我一直在努力,undefined而且我不知道为什么.经过一些搜索后,很明显refs只适用于一个文件,但除了这一页之外,我没有在任何地方使用它.我这样说是为了记录它:

console.log('REFS', this.refs.russian);

可能是什么导致了这个？

Answer 1

在安装子组件之前,请检查您是否未访问ref.例如,它不起作用componentWillMount.在安装元素后自动调用ref相关回调的不同模式是 -

componentWillMount

您可以使用此表示法将嵌入元素也嵌入深层嵌套中 -

componentWillMount

Answer 2

正确的使用位置refs是特定的React生命周期方法,例如ComponentDidMount,ComponentDidUpdate

您无法refs从该render()方法中引用.阅读更多关于在refs这里工作的注意事项.

如果您移动console.log('REFS', this.refs.russian);到来电ComponentDidMount或ComponentDidUpdate生命周期方法(假设你是上反应> = 14),你不应该得到不确定的结果.

更新:根据上面的警告链接,refs也不会对无状态组件起作用

Answer 3

从React版本16.4开始更新

在构造方法中，像这样定义您的ref

constructor(props) {
  super(props);
  this.russian = React.createRef();
}

在您使用的渲染器中ref执行此操作。

<input
  name="russian"
  ref={this.russian} // Proper way to assign ref in react ver 16.4
/>  

例如，如果您想在安装组件时集中精力，请执行此操作

componentDidMount() {
  console.log(this.russian); 
  this.russian.current.focus();
 }

参考参考文献React