我想在按下按钮时动态添加此卡组件.因此，如果我按下按钮3次，则必须向DOM中添加3张卡

Question

我想在按下按钮时动态添加此卡组件。因此，如果我按下按钮3次，则必须向DOM中添加3张卡。有人能帮我解释为什么这不起作用吗？我是新手。提前谢谢。是因为我不能使用渲染方法之外的组件吗

import React, {Component} from 'react';
import Card from './Card'
class App extends Component {
addRobotHandler = () => {
return (
<Card/>
)
}
render() {
return (
<div>
<button onClick={this.addRobotHandler}>Click me to see Robots</button>
</div>
);
}
}
export default App;

Answer 1

您可以添加一个定义计数的状态，并在渲染函数中渲染该数量的卡。

// sample example
class Example extends Component {
constructor(props) {
super(props);
this.state = {
cardsCount: 0
};
}
addRobotHandler = () => {
this.setState(prevState => {
return { cardsCount: prevState.cardsCount + 1 };
});
};
getCards = ()  => {
let cards = [];
for(let i = 0; i < this.state.cardsCount; i++) {
cards.push(<Cards/>)
}
return cards;
}
render() {
return (
<div>
<button onClick={this.addRobotHandler}>Click me to see Robots</button>
{this.getCards()}
</div>
);
}
}