添加新的 React 组件 onclick

Question

我对 React 比较陌生，但熟悉 JavaScript。我想制作一个非常简单的应用程序，每当我想附加一个新的 HTML 元素时，我都会在 JavaScript 中执行以下操作 document.getElementById("root").innerHTML += "<h1>Title</h1>";：在 React 中，我想在单击按钮时将一个新的 MyComponent 组件附加到我的页面。我怎样才能以类似于.innerHTML +=. 下面是我到目前为止给出的一个想法，但它不起作用。

索引.js：

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);

应用程序.js：

function my_func() {

  var prop1 = prompt("Input here ");

  var prop2 = "new_id";

  document.getElementById("app-root").innerHTML += <MyComponent p1={ prop1 } p2={ prop2 }/>;

}

function App() {

  return (

      <div id="app-root">

      <Button color="primary" onClick={ my_func }>Add</Button>{' '}

      </div>

  );

}

export default App;

Answer 1

你应该在这里实现 React State。您将添加的组件列表保存到 this.state。这是我的建议。这是 App.jsimport React, { Component } from 'react';class App extends Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; clicked: false,&nbsp; &nbsp; &nbsp; mycomponentlist:[]&nbsp; &nbsp; };&nbsp; &nbsp; this.my_func = this.my_func.bind(this);&nbsp; }&nbsp; my_func(){&nbsp; &nbsp; &nbsp;let {mycomponentlist} = this.state;&nbsp; &nbsp; &nbsp;var prop1 = prompt("Input here ");&nbsp; &nbsp; &nbsp;var prop2 = "new_id";&nbsp; &nbsp; &nbsp;mycomponentlist.push({prop1,prop2});&nbsp; &nbsp; &nbsp;this.setState({mycomponentlist,clicked:true});&nbsp; }&nbsp;&nbsp; render() {&nbsp; &nbsp; const {clicked,mycomponentlist} = this.state;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div id="app-root">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<button&nbsp; onClick={this.my_func }>Add</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{clicked&& mycomponentlist.map(mycomponent=> <MyComponent p1={ mycomponent.prop1 } p2={ mycomponent.prop2 }/>)}&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}export default App;这是 MyComponent.jsimport React, { Component } from 'react';class MyComponent extends Component {&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; const { p1,p2} = this.props;&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //you can use p1,p2 here...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>{p1}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>{p2}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}export default MyComponent;我相信这会奏效。当第一次点击按钮然后点击状态变为真时，组件数组会在每次渲染时显示。

Answer 2

尝试这样的事情，可能需要根据您的具体要求稍微修改一下。import React,{useState} from 'react';const App = ()=> {&nbsp; &nbsp; const [items, setItems] = useState([]);&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; Your JSX&nbsp; &nbsp; &nbsp; {items.map((item)=> {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;);&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; <button onClick={push into items}&nbsp; &nbsp; );}