反应，未捕获的 ReferenceError:ReactDOM 未定义 [英] React, Uncaught ReferenceError: ReactDOM is not defined

问题描述

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

我的 App.jsx 文件:

从'react'导入React；从 'react-dom' 导入 ReactDOM；import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'类 App 扩展了 React.Component {使成为() {返回 (<div><ul><li>首页</链接><li>关于</链接><li>联系方式</Link>{this.props.children}

)}}导出默认应用程序；class Home 扩展 React.Component {使成为() {返回 (<div><h1>首页...</h1>

)}}导出默认首页；class 关于扩展 React.Component {使成为() {返回 (<div><h1>关于...</h1>

)}}导出默认关于；class Contact 扩展 React.Component {使成为() {返回 (<div><h1>联系...</h1>

)}}导出默认联系人；

我的 Main.js 文件:

ReactDOM.render((<路由器历史记录 = {browserHistory}><路由路径=/"组件={App}><IndexRoute 组件 = {Home}/><Route path = "home" component = {Home}/><路由路径=关于"组件={关于}/><路由路径=联系方式"组件={联系方式}/></路线></路由器>), document.getElementById('app'))

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

<块引用>

未捕获的引用错误:ReactDOM 未定义

我真的不知道该怎么办.到目前为止，每一次都没有错误.在这里我不知道该怎么做.

解决方案

你需要在 Main.js 中导入 ReactDOM 而不是 App.jsxcode>，因为 Main 是您使用 ReactDOM 进行渲染的地方.

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

最后，也将 react-router 导入也放入 Main.

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

把Main.js改成这样

从 'react-dom' 导入 ReactDOM从反应"导入反应import { Router, Route, browserHistory, IndexRoute } from 'react-router'ReactDOM.render((<路由器历史记录 = {browserHistory}><路由路径=/"组件={App}><IndexRoute 组件 = {Home}/><Route path = "home" component = {Home}/><路由路径=关于"组件={关于}/><路由路径=联系方式"组件={联系方式}/></路线></路由器>), document.getElementById('app'))

I am doing this Router tutorial.

My App.jsx file:

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:

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:

Uncaught ReferenceError: ReactDOM is not defined

I really dont know what to do. Followed every tut so far with no errors. Here I have no Idea what to do.

解决方案

You need to import ReactDOM in Main.js instead of App.jsx, as Main is where you are using ReactDOM to render.

Also need to import React in all files that use JSX.

Finally, also put react-router imports into Main, too.

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.js to look like

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

这篇关于反应，未捕获的 ReferenceError:ReactDOM 未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！