如何通過單個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