Javascript 无法读取 null 的属性“getHostNode”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38796376/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot read property 'getHostNode' of null
提问by alexarsh
I have a horizon/react app with react router and I have a simple button in my app:
我有一个带有反应路由器的地平线/反应应用程序，我的应用程序中有一个简单的按钮：
<Link className="dark button" to="/">Another Search</Link>
When I click on it, I get the following exception:
当我单击它时，出现以下异常：
Uncaught TypeError: Cannot read property 'getHostNode' of null
The error comes from:
错误来自：
getHostNode: function (internalInstance) {
return internalInstance.getHostNode();
},
Any idea why am I getting this?
知道为什么我会得到这个吗？
采纳答案by Alan Souza
I was facing a similar issue. It turns out that, in my case, was highlighthjs removing comments from the generated dom.
我面临着类似的问题。事实证明，就我而言，是 highlighthjs 从生成的 dom 中删除注释。
For text, React 15 is adding comment with the reactid instead of a span tag, as in:
对于文本，React 15 使用 reactid 而不是 span 标签添加注释，如下所示：
<!-- react-text: 248-->
Another Search
<!--/react-test-->
Can you try something like this?
你能试试这样的吗？
<Link className="dark button" to="/"><span>Another Search</span></Link>
<Link className="dark button" to="/"><span>Another Search</span></Link>
This will force the generated DOM to include the span with the proper data-reactidattribute.
这将强制生成的 DOM 包含具有适当data-reactid属性的 span 。
I would file an issue with react-router, maybe they can do that internally so you would not have to bother about it. But there are challenges with that as the Link child could be basically anything.
我会向 react-router 提出问题，也许他们可以在内部完成，这样您就不必费心了。但是这存在挑战，因为 Link 子项基本上可以是任何东西。
回答by Niyaz
I have run into this issue multiple times in the last few days (new to react) and in almost all the cases, there was some syntax/code error that was not caught anywhere else. One example: If you write:
在过去的几天里，我多次遇到这个问题（刚开始反应），几乎在所有情况下，都有一些语法/代码错误在其他任何地方都没有发现。一个例子：如果你写：
getInitialState() {
showModal: false
},
instead of:
代替：
getInitialState() {
return {
showModal: false
};
},
you will get this error. That is unless your build process does not already catch the error. Hope this helps someone (or myself in a couple of days. Hi Niyaz, you are welcome!).
你会得到这个错误。除非您的构建过程尚未捕获错误。希望这可以帮助某人（或几天后我自己。Hi Niyaz, you are welcome!）。
回答by Ogglas
If anyone else finds this thread. For me this turned out to be a null error for a prop.
如果其他人找到这个线程。对我来说，结果证明这是一个道具的空错误。
Code generating error:
代码生成错误：
<Menu InventoryCount={this.state.inventoryModel.length} />
Working null checked code:
工作空检查代码：
<Menu InventoryCount={this.state.inventoryModel ? this.state.inventoryModel.length : 0} />
回答by syg
For me, it's a typo which results in importing component from wrong module.
对我来说，这是一个错字，导致从错误的模块导入组件。
import { Link, Icon } from 'react-router';
import { Tag } from 'antd';
it should be
它应该是
import { Link } from 'react-router';
import { Tag, Icon } from 'antd';
回答by falconsAndFunctions
I just had to restart my nodemon backend.
我只需要重新启动我的 nodemon 后端。
回答by Developer
if you getting error like "getHostNode" of null then its a error related to old code which is written before and it comes with version update of react
如果您收到类似 null 的“getHostNode”之类的错误，那么它是与之前编写的旧代码相关的错误，并且它带有 react 的版本更新
we have two ways to resolve the same 1) First we have to uninstall react from project and than again install react with the version specified( old one 15.4.2) current version of react is 15.6.1 2) Second way is bit time consuming but for future of application its good , go through the old code and handle errors(error handling of promises ) with the correct way following are few links which help you to figure out whats running behind
我们有两种方法可以解决相同的问题 1）首先我们必须从项目中卸载 react，然后再安装指定版本的 react（旧版本 15.4.2）当前版本的 react 是 15.6.1 2）第二种方法有点耗时但是对于应用程序的未来它的好处，请通过旧代码并以正确的方式处理错误（承诺的错误处理），以下是一些可以帮助您找出背后运行的链接
https://github.com/facebook/react/issues/8579https://github.com/mitodl/micromasters/pull/3022
https://github.com/facebook/react/issues/8579 https://github.com/mitodl/micromasters/pull/3022
回答by Anil Namde
Very interesting :) for me, it turned out that I was consuming props incorrectly in child component. Might be helpful for someone.
非常有趣:) 对我来说，结果是我在子组件中错误地使用了道具。可能对某人有帮助。
function Parent(){
const styleEle = { width: '100px'};
return (<div>
<Child styleO={styleEle}/>
</div>);
}
function Parent(props){
// here i was directly using <div style={styleO}> causing issue for me
return (<div style={props.styleO}>
{'Something'}
</div>)
}
回答by Dennis T
I got this error trying to render undefinedvalue by mistake.
我在尝试错误地呈现undefined值时遇到此错误。
render(){
let name = this.getName(); // this returns `undefined`
return <div>name: {name}</div>
}
The fix is to fallback to null (where is accepted value)
解决方法是回退到 null（接受值的地方）
render(){
let name = this.getName(); // this returns `undefined`
return <div>name: {name || null}</div>
}
回答by Katti
In my case React was not in the scope of the file.
在我的情况下，React 不在文件的范围内。
If you import a variable which has jsx from a different file which does not have react imported in it.
如果您从另一个文件中导入一个具有 jsx 的变量，该文件中没有导入 react。
import React from "react";
Using following eslint plugin would avoid this: react-in-jsx-scope
使用以下 eslint 插件可以避免这种情况： react-in-jsx-scope
Source: https://github.com/yannickcr/eslint-plugin-react/issues/84
来源：https: //github.com/yannickcr/eslint-plugin-react/issues/84
回答by Borjovsky
In my case, an import was missing. Check your imports!
就我而言，缺少导入。检查您的进口！
