React 15.4.2 无法读取 null 的属性“ref”

Posted 2023-02-25

【中文标题】React 15.4.2 无法读取 null 的属性“ref”

【英文标题】：React 15.4.2 Cannot read property 'ref' of null

【发布时间】：2017-01-31 15:46:25

【问题描述】：

我尝试访问子组件的方法。 它看起来像这样： 1.通过组件的引用名称然后方法调用方法

Form.js

this.ref.details.getDataFromComponent();
    <Details
        pointToShow=this.state.point
        ref="details"
    />

Details.js

getDataFromComponent() 
  //do my stuff get state and connect to get data for component Details

我一直有“未捕获的类型错误：无法读取 null 的属性 'ref'” 反应 15.4.2

【问题讨论】：

告诉我们你在哪里定义details ref

//do my stuff get state and connect to get data for component Details ...至少其中一些可能有用

【参考方案1】：

要访问组件的引用，您需要使用this.refs，而不是this.ref。

但是，这似乎不是这里的问题，因为当您尝试访问它时，错误清楚地表明this 是null。要确定这是为什么，我们需要查看更多代码。

---

您还应该考虑使用 ref callback attribute 而不是您的方式来定义 refs，因为不再推荐使用这种语法，并且可能会在未来的版本中删除。

【讨论】：

谢谢，这是我的解决方案，另外我应该通过绑定向构造函数添加一种方法

【参考方案2】：

正如 Timo 提到的使用 refs 访问元素，你应该写 this.refs...

根据错误您无权访问this。很可能你在一个方法中调用了this.ref.details.getDataFromComponent();，而无法访问this

例如你写：

callRef() 
  this.ref.details.getDataFromComponent();
  ....

如果是这样，那么您无权访问那里的this。您应该使用this 绑定您的函数。 您可以使用箭头功能与this 自动绑定：

callRef = () => 
  this.ref.details.getDataFromComponent();
  ....

注意：要使用箭头功能，您需要在 webpack 配置中使用 babel loader。

或者你可以在调用方法的时候绑定。 例如，您应该在 jsx 代码中调用 callRef() 方法，如下所示：

< ... onClick=this.callRef.bind(this) />