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的头部时，事件是未触发因为未加载DOM ，但ReactDOM尝试在DOM中呈现Exactum并失败。

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

试试这个并告诉我它是否有效：将bundle.js放在<body>标签的末尾。

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

1 个答案: