如何在babeljs中添加div

Question

使用它总是会更新html，但不会追加到其中。

function App(props) {
  return (
    <div>
      hello
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("emails-view-content"));
for (let i = 0; i < 3; i++) {
  
  root.render(<App/>);
}

我想打个招呼，3次，只写一次。

Answer 1

App应该是将"hello“语句添加到HTML中的组件。

你怎么做完全取决于你自己，但以下是一个简单的例子。它使用一个单独的<Hello>组件。App在其道具中接收一个数字，用于创建一个<Hello>组件数组，然后呈现这些组件。

​

function App({ number }) {

  function buildHellos(n) {
    return new Array(n).fill(<Hello />);
  }

  return (
    <div>{buildHellos(+number)}</div>
  );

}

function Hello() {
  return <p>Hello</p>;
}

ReactDOM.render(
  <App number="3" />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

​