如何通过单个index.js文件正确渲染多个React组件？

Question

我已经创建了两个React组件类，一个创建了一个计数器，另一个创建了一个包装在HTML标记中的简单字符串。 我正在尝试通过index.js将它们都呈现为HTML文件，计数器可以工作，但是字符串不起作用，我需要帮助来理解原因。 （我已经看过多个教程，但似乎找不到能帮助我理解问题的教程）。

这是我的计数器类（我可以在HTML文件中呈现）：

import React from 'react';

class Counter extends React.Component{   constructor() {
    super();
    this.state = {
      count: 0,
    };   }

  render() {
    return (
      <button
        onClick={() => {
          this.setState({ count: this.state.count + 1 });
        }}
      >
        Count: {this.state.count}
      </button>
    );   } } export default Counter;

字符串类（我无法在HTML中呈现）：

import React from 'react';

export class Exactum extends React.Component{

  render() {
    return (
      <p>this is exactum</p>
    );   } }

export default Exactum;

还有我正在用来渲染它们的index.js文件：

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './components/Counter';
import Exactum from './components/Exactum';

document.addEventListener('DOMContentLoaded', function() {
  ReactDOM.render(
    React.createElement(Counter),
    document.getElementById('mount')
  );
});

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

这是我正在使用的HTML文件：

<html>
<head>
  <meta charset="UTF-8" />
<title>Counter</title>
  <script src="/bundle.js" ></script>
</head>
<body>
  <div>
    <p>Counter</p>
    <div id="mount"></div>
    <p>Exactum should appear here:</p>
    <div id="app"></div>
  </div>
</body>
</html>

Answer 1

bundle.js位于应用程序的开头，而不是Body标记的结尾。

为什么在index.js中使用<Counter />而不使用<Exactum /> ？

这是因为您将事件DOMContentLoaded添加到Counter中，因此，当JavaScript加载到HTML的Head中时， 由于未加载DOM而未触发该事件 ，但是ReactDOM尝试在DOM中呈现Exactum并失败。

但是当DOM完全加载后，将触发DOMContentLoaded事件，并且ReactDOM可以在DOM中呈现Counter，因为现在已加载DOM。

试试这个，告诉我是否可行：将bundle.js放在<body>标记的末尾。

如何通过单个index.js文件正确渲染多个React组件？

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-10-10 14:11:21

如何通过单个index.js文件正确渲染多个React组件？

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-10-10 14:11:21

解决方案1
0 已采纳 2017-10-10 14:11:21