添加新的 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.js

import React, { Component } from 'react';

class App extends Component {

  constructor(props) {

    super(props);

    this.state = {

      clicked: false,

      mycomponentlist:[]

    };

    this.my_func = this.my_func.bind(this);

  }

  my_func(){

     let {mycomponentlist} = this.state;

     var prop1 = prompt("Input here ");

     var prop2 = "new_id";

     mycomponentlist.push({prop1,prop2});

     this.setState({mycomponentlist,clicked:true});

  } 

  render() {

    const {clicked,mycomponentlist} = this.state;

    return (

      <div id="app-root">

         <button  onClick={this.my_func }>Add</button>

         {clicked&& mycomponentlist.map(mycomponent=> <MyComponent p1={ mycomponent.prop1 } p2={ mycomponent.prop2 }/>)}       

      </div>

    );

  }

}

export default App;

这是 MyComponent.js

import React, { Component } from 'react';

class MyComponent extends Component {

    render() {

        const { p1,p2} = this.props;

        return (

            <div >

                //you can use p1,p2 here...

                <p>{p1}</p>

                <p>{p2}</p>

            </div>

        )

    }

}

export default MyComponent;

我相信这会奏效。当第一次点击按钮然后点击状态变为真时，组件数组会在每次渲染时显示。

Answer 2

尝试这样的事情，可能需要根据您的具体要求稍微修改一下。

import React,{useState} from 'react';

const App = ()=> {

    const [items, setItems] = useState([]);

    return(

      Your JSX

      {items.map((item)=> {

         return(

          <li>item</li>

         );

      })

      <button onClick={push into items}

    );

}