Javascript 反应，未捕获的 ReferenceError：ReactDOM 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38293818/
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
React, Uncaught ReferenceError: ReactDOM is not defined
提问by Kenan Balija
I am doing this Router tutorial.
我正在做这个路由器教程。
My App.jsx file:
我的 App.jsx 文件：
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'
class App extends React.Component {
render() {
return (
<div>
<ul>
<li>Home</Link>
<li>About</Link>
<li>Contact</Link>
</ul>
{this.props.children}
</div>
)
}
}
export default App;
class Home extends React.Component {
render() {
return (
<div>
<h1>Home...</h1>
</div>
)
}
}
export default Home;
class About extends React.Component {
render() {
return (
<div>
<h1>About...</h1>
</div>
)
}
}
export default About;
class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact...</h1>
</div>
)
}
}
export default Contact;
my Main.js file:
我的 Main.js 文件：
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))
This error is written to the console: index.js:
此错误写入控制台：index.js：
Uncaught ReferenceError: ReactDOM is not defined
未捕获的 ReferenceError：ReactDOM 未定义
I really dont know what to do. Followed every tut so far with no errors. Here I have no Idea what to do.
我真的不知道该怎么办。到目前为止，每一次都没有错误。在这里我不知道该怎么做。
采纳答案by Gosha Arinich
You need to import ReactDOMin Main.jsinstead of App.jsx, as Mainis where you are using ReactDOMto render.
您需要导入ReactDOMinMain.js而不是App.jsx，就像Main您ReactDOM用来渲染的地方一样。
Also need to import Reactin all files that use JSX.
还需要导入React所有使用 JSX 的文件。
Finally, also put react-routerimports into Main, too.
最后，也将react-router导入放入Main, 。
The way imports work is, you import things you need, in places they're needed. It's not enough to import them once in one file and use in others.
导入的工作方式是，在需要的地方导入需要的东西。在一个文件中导入一次并在其他文件中使用是不够的。
Change Main.jsto look like
改变Main.js看起来像
import ReactDOM from 'react-dom'
import React from 'react'
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))
回答by Sanaullah Ahmad
1) install "npm install --save react-router-dom" with this command. 2) Know modify your App.jsx like this
1）使用此命令安装“npm install --save react-router-dom”。2）知道像这样修改你的 App.jsx
import React from 'react';
import { Switch, Route, Link} from 'react-router-dom';
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<header>
<nav>
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='/about'>About</Link></li>
<li><Link to='/contact'>Contact</Link></li>
</ul>
</nav>
</header>
);
}
}
class Content extends React.Component {
render() {
return (
<main>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/about' component={About}/>
<Route path='/contact' component={Contact}/>
</Switch>
</main>
);
}
}
class Home extends React.Component {
render() {
return (
<div>
<h1>Home...</h1>
</div>
);
}
}
class About extends React.Component {
render() {
return (
<div>
<h1>About...</h1>
</div>
);
}
}
class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact...</h1>
</div>
);
}
}
export default App;
4) modify your main.js like this
4）像这样修改你的main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import {HashRouter} from 'react-router-dom';
ReactDOM.render((
<HashRouter>
<App />
</HashRouter>
), document.getElementById('app'))
回答by Deke
This error also happens if there is a Typo "import ReactDOM from "react-dom";"
如果有错字，也会发生此错误 "import ReactDOM from "react-dom";"
and then call Reactdom.render( <App />, document.getElementById('root'))instead of ReactDOM.render....
然后调用Reactdom.render( <App />, document.getElementById('root'))而不是ReactDOM.render....
回答by Ehsan sarshar
I just have a simple solution for it!
我只是有一个简单的解决方案！
in my case the problem was with ReactDom namespace. just change it to something else and it work!
就我而言，问题出在 ReactDom 命名空间上。只需将其更改为其他内容即可！
import XReactDom from 'react-dom'
回答by Kokovin Vladislav
you should import ReactDOM and other stuff in Main.js
你应该在 Main.js 中导入 ReactDOM 和其他东西
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
import {App, Home, About,Contact} from './App'
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))
if App.js file contains all componentsyou should change export statements:
如果 App.js 文件包含您应该更改导出语句的所有组件：
fromexport default Component
从export default Component
toexport Component.
到export Component。
And use named importin Main.js import {App, Home, About,Contact} from './App'
并在 Main.js 中使用命名导入import {App, Home, About,Contact} from './App'
import React from 'react';
import { Link, browserHistory} from 'react-router'
class App extends React.Component {
render() {
return (
<div>
<ul>
<li>Home</Link>
<li>About</Link>
<li>Contact</Link>
</ul>
{this.props.children}
</div>
)
}
}
export App;
class Home extends React.Component {
render() {
return (
<div>
<h1>Home...</h1>
</div>
)
}
}
export Home;
class About extends React.Component {
render() {
return (
<div>
<h1>About...</h1>
</div>
)
}
}
export About;
class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact...</h1>
</div>
)
}
}
export Contact;
for browserHistory, you must configure your server appropriatelyto serve at all routed paths. The simplier way is using hashHistory.
对于 browserHistory，您必须适当地配置您的服务器以在所有路由路径上提供服务。更简单的方法是使用 hashHistory。
//import hashHistory
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
...
//pass in Router
<Router history = {hashHistory}> ....
回答by Sanaullah Ahmad
In this tutor this command "npm install react-router" does not save it in package.json file so modify and run command to "npm install --save react-router".
在本教程中，此命令“npm install react-router”不会将其保存在 package.json 文件中，因此请修改并运行“npm install --save react-router”命令。
