Javascript reactjs-为动态创建的按钮创建切换

目前，我在使用JS/React/React Native时遇到了一个问题。我从API中提取类别，并根据结果制作按钮（它们经常根据URL中的不同变量而变化）。我使用的代码如下所示：

const cats = singles.map((d) => {
return (
  <TouchableOpacity key={d} style={styles.Settingcats}><Text style={{color: '#f55f44'}}>{d}</Text></TouchableOpacity>
)}

const cats=singles.map（（d）=>{
返回(
{d}
)}

使用动态生成的按钮，我希望它们能够在应用程序中进行切换。当我尝试使用以下代码使用状态时：

const cats = singles.map((d) => {
return (
  <TouchableOpacity key={d} onPress={ _ => this.changeStyle} style={this.state.style === 0 ? styles.Settingcats : styles.SelSettingcats}><Text style={{color: '#f55f44'}}>{d}</Text></TouchableOpacity>
)}

const cats=singles.map（（d）=>{
返回(
this.changeStyle}style={this.state.style==0？style.Settingcats:style.SelSettingcats}>{d}
)}

我意识到，因为这是指所有按钮的一种状态，它会改变所有按钮的样式。所以我试着考虑使用这个框，并考虑使用ID作为状态名称，创建状态，并通过外部函数利用状态来改变它的值

const cats = singles.map((d) => {
return (
  <TouchableOpacity key={d} onPress={ _ => this.changeStyle(d)} style={this.state([d]) === 0 ? styles.Settingcats : styles.SelSettingcats}><Text style={{color: '#f55f44'}}>{d}</Text></TouchableOpacity>
)}
changeStyle(d){
  this.setState({
    [d] : 1
})}

const cats=singles.map（（d）=>{
返回(
this.changeStyle（d）}style={this.state（[d]）==0？style.Settingcats:style.SelSettingcats}>{d}
)}
更改样式（d）{
这是我的国家({
[d] ：1
})}

它抛出一个错误，因为该状态被当作函数使用

我可以使用什么实践使动态创建的按钮具有自己的单独切换事件

---

我尝试过的其他东西：自定义开关、材质UI，但当切换按钮具有独特功能时，我遇到了同样的问题。

与其尝试在顶层管理状态列表，不如将TouchableOpacity移动到内部处理切换状态的组件中

class MyButton extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        toggle: false
    }
    this.setToggle = this.setToggle.bind(this);
  }

  setToggle(){
    this.setState({
        toggle: !this.state.toggle
    })
  }

    render(){
    return <TouchableOpacity onClick={this.setToggle} className={this.state.toggle ? 'red' : 'blue'}>{this.props.name}</TouchableOpacity>
  }
}

class MyButton扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
切换：false
}
this.setToggle=this.setToggle.bind（this）；
}
setToggle（）{
这是我的国家({
切换：！this.state.toggle
})
}
render（）{
返回{this.props.name}
}
}

您可以呈现这些元素的列表，每个元素独立于其他元素管理自己的切换状态

---

这里有一个小提琴的例子：

我用来实现这一点的方法，非常感谢@simbathesille

我使用状态中的变量来动态创建状态，通过使用

---

其中，d是我用Touchable不透明组件创建的动态变量。

您可以通过此访问状态中的属性。状态[d]。尝试此操作。您是将其作为函数调用的。如何将这些按钮向左移动，就像行已满一样，直到向右移动，并且在单击按钮时动态添加任何新按钮

this.state[d]