如何 append 到 babeljs 中的 div

Question

使用它总是会更新 html 但不会更新 append 。

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 次你好，而不是 1 次。

Answer 1

App应该是向 HTML 添加“hello”语句的组件。

你如何做到这一点完全取决于你，但这里有一个简单的例子。 它使用一个单独的<Hello>组件。 App在其 props 中接收到一个数字，它用于创建一个<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>