React,Uncaught ReferenceError:未定义ReactDOM

Question

我正在做这个路由器教程.

我的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;

我的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'))

此错误将写入控制台:index.js:

未捕获的ReferenceError:未定义ReactDOM

我真的不知道该怎么做.到目前为止,每个tut都没有错误.在这里,我不知道该怎么做.

Answer 1

您需要导入ReactDOM的Main.js,而不是App.jsx,因为Main是你正在使用ReactDOM渲染.

还需要导入React所有使用JSX的文件.

最后,也将react-router进口也纳入其中Main.

导入工作的方式是,在需要的地方导入所需的东西.将它们一次导入一个文件并在其他文件中使用是不够的.

改变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'))

Answer 2

如果有拼写错误也会发生此错误
"import ReactDOM from "react-dom";"

然后调用Reactdom.render( <App />, document.getElementById('root'))而不是ReactDOM.render....