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 link看到了答案。但是我很遗憾我无法得到那里解释的内容。提供我的建议。提前谢谢！

Answer 1

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

确保您的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中的组件我理解......我们需要在

中添加HelloMessage组件

的src / App.js

但 ---＆gt;最初看起来像是：

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组件替换App组件，而不是渲染App组件。我所做的是......

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文件中的名称道具：

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"/>

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

2 个答案: