[英]Insert dynamically a React component in a div
I'd like to insert dynamically several React component in a div HTML element. 我想在div HTML元素中动态插入几个React组件。 Every time that I click on button, I would like to add a new
PeriodButtonContainer
inside div with id="container"
. 每次单击按钮时,我想在div内添加一个新的
PeriodButtonContainer
,其id="container"
。
This is what I've tried so far: 到目前为止,这是我尝试过的:
class Period extends React.Component {
addPeriodHandler = () => {
/****?????******/
};
render() {
return (
<div>
<div id="container">
<PeriodButtonContainer />
</div>
<div>
<button id="addPeriod" onClick={this.addPeriodHandler}>
Add a period
</button>
</div>
</div>
);
}
}
Thanks in advance 提前致谢
You could keep a counter that you increment on each button click, and create that many PeriodButtonContainer
components in your render method with eg Array.from
. 你可以保留你在每个按钮上点击增加一个计数器,并创造许多
PeriodButtonContainer
在渲染法如组件Array.from
。
Example 例
class Period extends React.Component {
state = { periods: 1 };
addPeriodHandler = () => {
this.setState(previousState => {
return { periods: previousState.periods + 1 };
});
};
render() {
return (
<div>
<div id="container">
{Array.from({ length: this.state.periods }, (_, index) => (
<PeriodButtonContainer key={index} />
))}
</div>
<div>
<button id="addPeriod" onClick={this.addPeriodHandler}>
Add a period
</button>
</div>
</div>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.