在REACT js中渲染DOM元素

Question

在REACT js中渲染DOM元素

4

我在本地安装了最新的React 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, world Test! 而无法打印出 Hello, world Root! 尽管没有出现任何错误，这意味着它是一个 DOM 元素。我也进行了检查，但仍然没有渲染出来。
另外还有一件事，我在 index.html 中添加了 ID 为 'test' 的 div，这是一个不错的方法来添加 div。
我对 React 不熟悉，请帮忙。

- Narendra Vyas

1

我不知道为什么在一个类中有2~3个渲染函数。 - PSo

1

我认为你应该先查阅一份React教程。 - A. L

1

好的，谢谢。虽然我正在查看：https://facebook.github.io/react/docs/hello-world.html，但如果我只添加一个带有id root的ReactDOM.render函数，它也不会打印。我发布了两个以澄清我遇到的问题。在我的应用程序中，每次我都在root上渲染，但什么也没有发生。同时，我正在学习教程，但无法弄清楚这个问题是什么。 - Narendra Vyas

你需要仔细阅读文档，即使他们回答了你的问题，你也需要理解正在发生的事情。请查看此链接：https://facebook.github.io/react/docs/hello-world.html - damianfabian

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- PSo · Accepted Answer

回答你的问题：

render 已经代表了 ReactDOM.render 的意思，它们是同样的东西。所以在这个教程中，可以这样使用：

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

这与

相同。

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

React小教程：如果没有状态和属性，那么就是一个普通的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;

要使用state/props，您可以这样做： < p > 状态：

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

将文本替换为：

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

同样地，如果你有props =“Hello, world Root！”，你可以：

属性：

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