React，未捕获的 ReferenceError：未定义 ReactDOM

Posted 2023-02-19

【中文标题】React，未捕获的 ReferenceError：未定义 ReactDOM

【英文标题】：React, Uncaught ReferenceError: ReactDOM is not defined

【发布时间】：2016-11-12 15:01:20

【问题描述】：

我在做this Router tutorial.

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

Uncaught ReferenceError: ReactDOM is not defined

我真的不知道该怎么办。到目前为止，遵循每一个 tut，没有错误。在这里我不知道该怎么做。

【问题讨论】：

你可能想看看一些关于 ES6 模块的信息。

【参考方案1】：

我的 ReactDOM.render 遇到了同样的问题，直到我导入了以下内容：

import ReactDOM from 'react-dom'

进入我创建的页面，即购物车页面。

【参考方案2】：

我只有一个简单的解决方案！

就我而言，问题在于 ReactDom 命名空间。只需将其更改为其他内容即可！

import XReactDom from 'react-dom'

【参考方案3】：

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

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

【参考方案4】：

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) 像这样修改你的 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'))

【参考方案5】：

在本教程中，此命令“npm install react-router”不会将其保存在 package.json 文件中，因此请修改并运行命令为“npm install --save react-router”。

【参考方案6】：

你应该在 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'))

如果 App.js 文件包含所有组件您应该更改导出语句：

来自 export default Component

到export Component。

并在 Main.js 中使用 named import 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;

对于 browserHistory，您必须将服务器 appropriately 配置为在所有路由路径上提供服务。更简单的方法是使用 hashHistory。

//import hashHistory
import  Router, Route, hashHistory, IndexRoute   from 'react-router'
...
//pass in Router
<Router history = hashHistory> ....

【参考方案7】：

您需要在Main.js 中导入ReactDOM 而不是App.jsx，因为Main 是您使用ReactDOM 进行渲染的位置。

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

最后，还将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'))