this.refs.something 返回“未定义”答案

【问题标题】：this.refs.something returns "undefined"this.refs.something 返回“未定义”
【发布时间】：2016-05-15 18:38:30
【问题描述】：

我有一个带有 ref 的元素，该元素已定义并最终呈现到页面中：

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

我想访问诸如offset... 之类的DOM 元素属性。但是，我不断收到undefined，但我一点也不知道为什么。经过一番搜索，很明显refs 仅适用于一个文件，但除了这一页之外，我没有在任何地方使用它。我这样说是为了记录它：

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

这可能是什么原因造成的？

【问题讨论】：

【解决方案1】：

在安装子组件之前检查您是否没有访问 ref。例如。它在componentWillMount 中不起作用。在安装元素后自动调用 ref 相关回调的另一种模式是 this-

<div ref={(elem)=>(console.log(elem))}/>

您也可以使用此表示法在深度嵌套中获取已安装的元素 -

<div ref={this.props.onMounted}/>

【讨论】：

【解决方案2】：

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

如果您将 console.log('REFS', this.refs.russian); 调用移至 ComponentDidMount 或 ComponentDidUpdate 生命周期方法（假设您使用 React >= 14），则结果不应undefined。

更新：根据上面的警告链接，refs 也不适用于 无状态组件

【讨论】：

【解决方案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();
 }

【讨论】：

【解决方案4】：

不应将 Console.log 放入函数 example(){...} 中，而应将其放入：

example=()=>{....}

【讨论】：

【解决方案5】：

我在表单验证方法中遇到了类似问题，尝试分配 this.ref.current.reportValidity()

将我正在执行此操作的方法写为 validate = () => {} 而不是 validate() {} 帮助了我，但我不完全确定为什么，只是我从过去工作经验中的习惯中记住的东西给了我这。希望它有所帮助，有人可以澄清这个答案，说明为什么这可能完全有效。

【讨论】：

使用箭头函数包裹事件处理程序，这相当于调用 .bind（绑定方法有助于确保第二个 sn-p 的工作方式与第一个相同）当您需要调用带有参数的函数 prop，您应该始终指定调用该 prop 的胖箭头函数，React 将在组件呈现其内容时评估表达式，即使用户没有单击按钮元素也会调用该 prop。这很少是预期的效果，可能会导致意外行为或产生错误。

【解决方案6】：

如果你是用Style导出类，请删除并正常导出默认值。

【讨论】：