首頁猿問添加新的 React 組件...

添加新的 React 組件 onclick

JavaScript

神不在的星期二 2023-06-09 10:54:56

我對 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;

查看完整描述

2 回答

茅侃侃

TA貢獻1842條經驗獲得超22個贊

你應該在這里實現 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 (

{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...

</div>

)

}

export default MyComponent;

我相信這會奏效。當第一次點擊按鈕然后點擊狀態變為真時，組件數組會在每次渲染時顯示。

反對回復 2023-06-09

弒天下

TA貢獻1818條經驗獲得超8個贊

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

import React,{useState} from 'react';

const App = ()=> {

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

return(

Your JSX

{items.map((item)=> {

return(

);

})

<button onClick={push into items}

);

}

反對回復 2023-06-09

2 回答
0 關注
177 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

添加新的 React 組件 onclick

添加新的 React 組件 onclick

2 回答

添加回答