第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會有你想問的

添加新的 React 組件 onclick

添加新的 React 組件 onclick

神不在的星期二 2023-06-09 10:54:56
我對 React 比較陌生，但熟悉 JavaScript。我想制作一個(gè)非常簡單的應(yīng)用程序，每當(dāng)我想附加一個(gè)新的 HTML 元素時(shí)，我都會在 JavaScript 中執(zhí)行以下操作 document.getElementById("root").innerHTML += "<h1>Title</h1>";：在 React 中，我想在單擊按鈕時(shí)將一個(gè)新的 MyComponent 組件附加到我的頁面。我怎樣才能以類似于.innerHTML +=. 下面是我到目前為止給出的一個(gè)想法，但它不起作用。索引.js：ReactDOM.render(  <React.StrictMode>    <App />  </React.StrictMode>,  document.getElementById('root'));應(yīng)用程序.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;
查看完整描述

2 回答

?
茅侃侃

TA貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超22個(gè)贊

你應(yīng)該在這里實(shí)現(xiàn) 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;

我相信這會奏效。當(dāng)?shù)谝淮吸c(diǎn)擊按鈕然后點(diǎn)擊狀態(tài)變?yōu)檎鏁r(shí)，組件數(shù)組會在每次渲染時(shí)顯示。


查看完整回答
反對 回復(fù) 2023-06-09
?
弒天下

TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超8個(gè)贊

嘗試這樣的事情，可能需要根據(jù)您的具體要求稍微修改一下。


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}

    );

}


查看完整回答
反對 回復(fù) 2023-06-09
  • 2 回答
  • 0 關(guān)注
  • 176 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號