React Js：未定义mountNode no-undef错误

Question

我正在新学习React Js。 我在此Link找到了示例。 但是当我尝试第一个代码时：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactDOM from 'react-dom';

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  mountNode
);
export default HelloMessage;

我收到此错误

./src/App.js第18行：未定义'mountNode'no-undef

搜索关键字以了解有关每个错误的更多信息。

我已经在这个StackOverflow链接上看到了答案。 但对不起，我无法明白那里的解释。 给我建议。 先感谢您！

Answer 1

您收到的错误消息是棉绒错误。 （静态代码分析）

确保您的mountNode变量存在。

或使用类似：

render(<HelloMessage />, document.getElementById('app'));

另外，请确保您在HTML代码中具有ID为app的DOM元素：

例如：

<div id="app" />

Answer 2

ReactDOM.render（）方法已经位于

SRC / index.js

喜欢：

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

上面的代码渲染了位于public/index.html的根div中的组件，我了解到...我们需要在

SRC / App.js

但是--->最初看起来像：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

现在，无需渲染应用程序组件...我们可以在同一文件下编写HelloMessage组件，也可以将应用程序组件替换为HelloMessage组件。 我所做的是..

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}
//Added the HelloMessage Component
class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}
//Exported the HelloMessage Component to index.js file instead of App Component
export default HelloMessage;

之后，我可以在浏览器localhost:3000看到Hello消息。 但是名称Taylor并没有显示在那里...所以我所做的是从index.js文件中传递了名称props，例如：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
//Passed the name props to the
ReactDOM.render(<App name = "Taylor"/>, document.getElementById('root'));
registerServiceWorker();

现在，在这一点之后，我得到了成功的输出Hello Taylor 。 还要确保是否要用HelloMessage组件替换App组件。 不要忘了将其导入到index.js文件中

import HelloMessage from './App' 
...

同样，将<App name = "Taylor"/>替换为<HelloMessage name = "Taylor"/>