在 REACT js 中渲染 DOM 元素

Question

I have installed fresh react js on local as:我在本地安装了新的 react js：

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

App.js:应用程序.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:索引.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>

The issue is that i am able to print only Hello, world Test!问题是我只能打印 Hello, world Test! and not Hello, world Root!而不是你好，世界根！ although I am not getting any error too means it is a DOM element than way i am not getting any thing.虽然我没有收到任何错误也意味着它是一个 DOM 元素，而不是我没有收到任何东西。 I inspected it also and their also it is not rendering.我也检查了它，他们也没有渲染。
Also one more thing I added div with id 'test' in index.html so it a fine approach to add div in that.还有一件事我在index.html中添加了id为'test'的div，所以这是在其中添加div的好方法。
I am new to React any help please.我是 React 的新手，请提供任何帮助。

Answer 1

Answer to your question:回答你的问题：

The render is already stand for ReactDOM.render, is the same thing, so in the tutorial, it is like render 已经代表 ReactDOM.render，是一回事，所以在教程中，就像

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

which is the same as这与

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

React little tutorial: Is a plain HTML without state and props, i guess you are doing simply like this. React 小教程：是一个没有 state 和 props 的纯 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;

To use state/props, you can do something like:要使用状态/道具，您可以执行以下操作：

state :状态：

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

replace the text with:将文本替换为：

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

And similarly, if you have props = "Hello, world Root!", you can:同样，如果你有 props = "Hello, world Root!"，你可以：

props :道具：

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

在 REACT js 中渲染 DOM 元素

问题描述

1 个解决方案

解决方案1
4 已采纳 2017-02-03 07:21:49

在 REACT js 中渲染 DOM 元素

问题描述

1 个解决方案

解决方案1 4 已采纳 2017-02-03 07:21:49

解决方案1
4 已采纳 2017-02-03 07:21:49