关键词：
【中文标题】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) />
【讨论】：
由于 TypeError，React 页面未加载：无法读取 null 的属性“地图”
】由于TypeError，React页面未加载：无法读取null的属性“地图”【英文标题】：ReactpagenotloadingduetoTypeError:Cannotreadproperty\'map\'ofnull【发布时间】：2019-06-2116:45:23【问题描述】：importReactfrom\'react\';importLinkfrom"react-router-dom";constRecipes=pr... 查看详情
尝试访问数组后，React 组件返回无法读取 null 的属性 '__reactInternalInstance$
】尝试访问数组后，React组件返回无法读取null的属性\\\'__reactInternalInstance$【英文标题】：Reactcomponentreturningcannotreadproperty\'__reactInternalInstance$ofnullaftertryingtoaccessarray尝试访问数组后，React组件返回无法读取null的属性\'__reactInternalIn... 查看详情
Scalajs-react：未捕获的 TypeError：无法读取 null 的属性（读取“值”）
】Scalajs-react：未捕获的TypeError：无法读取null的属性（读取“值”）【英文标题】：Scalajs-react:UncaughtTypeError:Cannotreadpropertiesofnull(reading\'value\')【发布时间】：2021-11-2220:01:28【问题描述】：我的scalajs-react应用程序有以下代码：defre... 查看详情
react-native-video：无法读取 null 的属性“常量”
】react-native-video：无法读取null的属性“常量”【英文标题】：react-native-video:Cannotreadproperty\'Constants\'ofnull【发布时间】：2020-02-0115:17:39【问题描述】：我正在尝试在我的react原生项目中包含一个YouTube视频。由于我已经尝试过react-... 查看详情
REACT.js 错误：“无法读取 null 的属性‘方法’
】REACT.js错误：“无法读取null的属性‘方法’【英文标题】：REACT.jsError:"Cannotreadproperty\'methods\'ofnull【发布时间】：2021-07-2015:38:54【问题描述】：我正在学习在线教程以了解DAPP应用程序的工作原理，虽然我的代码与教程相匹... 查看详情
TypeError：无法读取 null React Apollo 测试的属性“createEvent”
】TypeError：无法读取nullReactApollo测试的属性“createEvent”【英文标题】：TypeError:Cannotreadproperty\'createEvent\'ofnullReactApollotesting【发布时间】：2021-06-0906:29:19【问题描述】：我收到一个错误，最终导致反应组件的测试崩溃。我正在使... 查看详情
当 Object 不在 DOM 中时，如何修复无法读取 React 钩子中 null 的 querySelector
】当Object不在DOM中时，如何修复无法读取React钩子中null的querySelector【英文标题】：HowtofixcannotreadquerySelectorofnullinReacthookwhenObjectisnotinDOM【发布时间】：2021-02-1200:23:47【问题描述】：组件/VideoPlayer.jsimport\'../../style/VideoPlayer/VideoPlaye... 查看详情
中继：无法读取 null 的属性“fetchKey”
】中继：无法读取null的属性“fetchKey”【英文标题】：Relay:Cannotreadproperty\'fetchKey\'ofnull【发布时间】：2021-04-2713:04:21【问题描述】：我尝试使用新的中继挂钩但收到此错误：importReact,Fragment,Suspense,useEffectfrom\'react\';importBannerfrom\'.... 查看详情
React 0.14.0-RC1 / React-Router 1.0.0-RC1 - 无法读取 null 的属性“道具”
】React0.14.0-RC1/React-Router1.0.0-RC1-无法读取null的属性“道具”【英文标题】：React0.14.0-RC1/React-Router1.0.0-RC1-Cannotreadproperty\'props\'ofnull【发布时间】：2016-01-0105:05:38【问题描述】：我正在AlexBank的"BuildingaPollingAppwithSocketIO工作和React.js" 查看详情
TypeError：无法读取 null 的属性（读取“发射”）
】TypeError：无法读取null的属性（读取“发射”）【英文标题】：TypeError:Cannotreadpropertiesofnull(reading\'emit\')【发布时间】：2022-01-1613:52:10【问题描述】：importiofrom"socket.io-client";importuseState,useEffectfrom"react";constGame=()=>const[socket,s 查看详情
TypeError：无法读取 null 的属性（读取“classList”）
】TypeError：无法读取null的属性（读取“classList”）【英文标题】：TypeError:Cannotreadpropertiesofnull(reading\'classList\')【发布时间】：2022-01-1207:37:58【问题描述】：我正在使用nextjs应用程序。我只是想制作一个下拉菜单。这是我的完整... 查看详情
错误：无法读取 null 的属性“UIAppFonts”
】错误：无法读取null的属性“UIAppFonts”【英文标题】：Error:Cannotreadproperty\'UIAppFonts\'ofnull【发布时间】：2017-06-0712:19:27【问题描述】：运行react-nativelink时出现此错误，上面写着，rnpm-installERR!Itseemssomethingwentwrongwhilelinking.Error:Cann... 查看详情
TypeError：无法读取 null 的属性（读取“classList”）反应
】TypeError：无法读取null的属性（读取“classList”）反应【英文标题】：TypeError:Cannotreadpropertiesofnull(reading\'classList\')React【发布时间】：2021-11-2110:56:27【问题描述】：我有这个滚动的标题，我想将背景更改为不同的颜色。navbar变... 查看详情
React.JS - 我正在尝试将 .js 文件中的函数导入 .jsx 文件，但它仍然不起作用。无法读取 null 的属性“单击”
...试将.js文件中的函数导入.jsx文件，但它仍然不起作用。无法读取null的属性“单击”【英文标题】：React.JS-Iamtryingtoimportfunctionsfrom.jsfileinto.jsxfile,butitstilldoesn\'twork.Cannotreadproperty\'click\'ofnull\'【发布时间】：2019-04-0909:31:27【问题描... 查看详情
无法读取 null 的属性“getHostNode”
】无法读取null的属性“getHostNode”【英文标题】：Cannotreadproperty\'getHostNode\'ofnull【发布时间】：2016-12-1206:58:45【问题描述】：我有一个带反应路由器的Horizon/React应用程序，我的应用程序中有一个简单的按钮：<LinkclassName="d... 查看详情
类型错误：无法读取 null 的属性“帖子”
】类型错误：无法读取null的属性“帖子”【英文标题】：TypeError:Cannotreadproperty\'post\'ofnull"【发布时间】：2016-07-2306:10:14【问题描述】：我刚开始使用React，当我尝试进行Ajax调用时，遇到了一些麻烦。我得到：内联JSX脚本：29... 查看详情
× TypeError: 无法读取 null 的属性“名称”
】×TypeError:无法读取null的属性“名称”【英文标题】：×TypeError:Cannotreadproperty\'name\'ofnull【发布时间】：2021-10-1416:03:42【问题描述】：您好，我正在尝试使用react-reduxFirebasereactnavigation等制作Instagram克隆。现在我坚持显示用户的... 查看详情
TypeError：无法在反应中读取 null 的属性“名称”
】TypeError：无法在反应中读取null的属性“名称”【英文标题】：TypeError:Cannotreadproperty\'name\'ofnullinreact【发布时间】：2019-02-1622:27:21【问题描述】：我是react和redux的新手，所以经过大量研究后，我无法轻松解决这个错误。我正在... 查看详情