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

Question

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

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

我想访问 DOM 元素属性，如offset...或其他东西。 但是，我一直undefined并且我不知道为什么。 经过一番搜索后，很明显refs仅适用于一个文件，但除了这一页之外，我没有在任何地方使用它。 我说这个是为了记录它：

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

什么可能导致这种情况？

Answer 1

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

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

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

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

Answer 2

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

如果你移动你的console.log('REFS', this.refs.russian); 调用ComponentDidMount或ComponentDidUpdate生命周期方法（假设你在 React >= 14 上）你不应该因此得到undefined 。

更新：根据上面的警告链接，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();
 }

Answer 4

而不是将你的 Console.log 放在函数example(){...}你应该把它放在里面：

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

Answer 5

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

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

Answer 6

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