我有一个ref已定义并最终呈现到页面中的元素：
<div ref="russian" ...>
...
</div>
我想访问 DOM 元素属性之类的offset...。然而，我不断得到undefined，我不知道为什么。经过一番搜索，很明显refs它只适用于一个文件，但除了这一页之外，我没有在任何地方使用它。我说这个是为了记录它：
console.log('REFS', this.refs.russian);
什么可能导致这种情况？
this.refs.something 返回“未定义”
IT技术
javascript
reactjs
react-dom
react-ref
2021-04-14 17:38:43
6个回答
在安装子组件之前检查您是否没有访问 ref。例如它在componentWillMount. 在元素安装后自动调用与 ref 相关的回调的不同模式是 -
<div ref={(elem)=>(console.log(elem))}/>
您也可以使用此表示法在深层嵌套中获取已安装的元素 -
<div ref={this.props.onMounted}/>
正确的工作位置refs是在特定的 React 生命周期方法中，例如ComponentDidMount、ComponentDidUpdate
您不能refs从render()方法中引用。在此处阅读有关使用注意事项的更多信息refs。
如果您将console.log('REFS', this.refs.russian);调用移动到ComponentDidMount或ComponentDidUpdate生命周期方法（假设您在 React >= 14 上），您不应该因此得到undefined。
更新：根据上面的警告链接，refs 也不适用于无状态组件
从 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();
}
与其将 Console.log 放在函数中，不如example(){...}将其放入：
example=()=>{....}
我在表单验证方法中遇到了类似的问题，试图分配 this.ref.current.reportValidity()
写下我正在做的方法，validate = () => {}而不是validate() {}帮助我，但我不完全确定究竟是为什么，只是我从过去工作经验中的习惯中记住的东西给了我这个。希望它有所帮助，并且有人可以澄清这个答案，为什么这可能完全有效。