Question

我在本地安装了新的反应js：

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

App.js：

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>

        </div>
        <div id="root"></div>
        <div id="test"></div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>

      </div>
    );
  }
}

ReactDOM.render(
  <h1>Hello, world Root!</h1>,
  document.getElementById('root')
);

ReactDOM.render(
  <h1>Hello, world Test!</h1>,
  document.getElementById('test')
);

export default App;

的index.html：

    <body>
    <div id="root"></div>
    <div id="test"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start`.
      To create a production bundle, use `npm run build`.
    -->
  </body>

问题是我只能打印Hello，世界测试！而不是你好，世界根！虽然我没有得到任何错误也意味着它是一个DOM元素而不是我没有得到任何东西。我也检查了它，它们也没有渲染。
还有一件事我添加了id与id＆＃39; test＆＃39;在index.html中，这是一个很好的方法来添加div。
我是新手React任何帮助请。

Answer 1

回答你的问题：

渲染已经代表ReactDOM.render，是一回事，所以在教程中，它就像

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

与

相同

render() {
  return (
    <h1>Hello, world!</h1>
  )
}

反应小教程：是一个没有州和道具的普通HTML，我猜你就是这样做的。

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>

        <div id="root">
          <h1>Hello, world Root!</h1>
        </div>

        <div id="test">
          <h1>Hello, world Test!</h1>
        </div>

        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

要使用状态/道具，您可以执行以下操作：

状态：

constructor() {
  super();
  this.state = {
    text: "Hello, world Root!"
  };
}

将文字替换为：

<div id="test">
  <h1>{this.state.text}</h1>
</div>

同样，如果你有props =＆＃34; Hello，world Root！＆＃34;，你可以：

道具：

<div id="root">
  <h1>{this.props.root}</h1>
</div>

在REACT js中渲染DOM元素

1 个答案: