我有以下代码:
import React, { Component } from 'react';
import {Button} from "@material-ui/core";
import Selector from "./Selector"
class Trigger extends Component {
constructor(props) {
super(props);
this.state = {
clicks: 0
};
}
IncrementItem = () => {
this.setState({
clicks: this.state.clicks + 1
});
}
DecreaseItem = () => {
this.setState({
clicks: this.state.clicks - 1
});
}
render() {
console.log(this.state)
return (
<div>
<Button
onClick={this.IncrementItem}
variant="contained"
color='primary'>
add
</Button>
{this.state.clicks ?
<Button
onClick={this.DecreaseItem}
variant="contained"
color='primary'>
remove
</Button>:
null}
{this.state.clicks ?
<Selector>
</Selector>:
null}
</div>
);
}
}
export default Trigger;
想法:
1. The first button increases this.state.clicks
2. The second button is shown only if this.state.clicks > 0
3. The second button decreases this.state.clicks
问题:渲染选择器组件 n 次(而不是像我的代码中那样只渲染一次),其中 n=this.state.clicks。
注意:选择器组件由 2 个选择器和多个选项组成,因此它不是一个字符串数组。 非常感谢!
最佳答案
试试这个:
{
[...Array(this.state.clicks)].map((v, i) => <Selector key={`selector-${i}`} /> )
}
关于javascript - 渲染一个 React 组件 n 次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59716109/