Reactjs 在单个组件内定义多个状态变量？

我希望制作一个内部可折叠的标记，然后多次迭代父级。这样我关闭/打开一个不会影响另一个

例如：

data.map((data)=>{
 <div id="parent">
     <div>data.user</div>
     <div>
     {
        (this.state.open)===true ?
           <div id="child">data.userDetails</div>
          :  <div>{null}</div> 
      }
    </div>
   </div>
 })

data.map（（数据）=>{
数据用户
{
（this.state.open）==true？
data.userDetails
：{null}
}
})

---

我希望动态定义“状态变量”。您可以看到我正在映射一个数组并试图读取用户Id。单击用户Id后，将调用“this.setState”（{open:true}），并打开用户详细信息。

实际上，您应该将打开元素的唯一索引（或Id）保持在该状态，并实现将更新它们的click方法

状态对象

state = {
   openedElements: {}
}

数据映射

data.map((el, idx) => {
 <div id="parent" onClick={this.toggleElement(idx)}>
     <div>{el.user}</div>
     <div>
      {
        this.state.openedElements[idx] &&
           <div id="child">{el.userDetails}</div>
      }
    </div>
   </div>
 })

---

注意：如果对象中有

id

，最好使用它们而不是

idx

（

el.id

）.

这是一个将当前类划分为更小的其他类的实例。如果您

通过数据映射

，并为每次迭代调用另一个类，例如..

，您可以将布尔值

打开

存储在类

数据可折叠

中，而不是这样做，您应该创建一个类user组件并处理其中的单击操作。这样，每个用户组件将独立于其他组件进行操作

data.map((data)=>{
   return <UserComponent user ={data.user} userDetails ={data.userDetails}/>
});

data.map（（数据）=>{
返回
});

而不是在用户组件中

class UserComponent extends React.Component{
  constructor(props){
    super(props);
    this.state{
      open:false
    }
    this.toggleDetails = this.toggleDetails.bind(this);
  }
  toggleDetails =()=>{
     this.setState((prevState)=>{open:!prevState.open});  //toggle Open state
  }
  render(){
    let {user, userDetails} = this.props //destructing of object
    return(
       <div id="parent" onClick ={this.toggleDetails}>
         <div>data.user</div>
          <div>
            {
             (this.state.open)===true ?
                <div id="child">userDetails</div>
                :  <div>{null}</div> 
            }
         </div>
       </div>
     );
    }
}

类UserComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； 这个州{ 开放：假 } this.toggleDetails=this.toggleDetails.bind（this）； } toggleDetails=（）=>{ this.setState（（prevState）=>{open:！prevState.open}）；//切换打开状态 } render（）{ 让{user，userDetails}=this.props//对象的销毁 返回( 数据用户 { （this.state.open）==true？ 用户详细信息 ：{null} } ); } }

---

那么你的问题到底是什么？另外：你用react native标记了这个问题，但你的代码片段只涉及web html标记。我正在寻找动态定义“状态变量”。你可以看到我正在映射一个数组并试图读取用户Id。单击userId后，单击“this.setState”（{open:true}）调用，并打开用户详细信息。它在生产中运行得像个冠军。谢谢，谢谢。我没有试过，因为我从Manjeet那里找到了更好的解决方案。@ManasGond太棒了！

class UserComponent extends React.Component{
  constructor(props){
    super(props);
    this.state{
      open:false
    }
    this.toggleDetails = this.toggleDetails.bind(this);
  }
  toggleDetails =()=>{
     this.setState((prevState)=>{open:!prevState.open});  //toggle Open state
  }
  render(){
    let {user, userDetails} = this.props //destructing of object
    return(
       <div id="parent" onClick ={this.toggleDetails}>
         <div>data.user</div>
          <div>
            {
             (this.state.open)===true ?
                <div id="child">userDetails</div>
                :  <div>{null}</div> 
            }
         </div>
       </div>
     );
    }
}