时间戳

首页 > 解决方案 > 在单个组件内定义多个状态变量？

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>
 })

我正在寻找动态定义“状态变量”。您可以看到我正在映射一个数组并尝试读取用户 ID。单击 userId 后，将调用“this.setState({open:true})”并打开用户详细信息。

标签： reactjs

解决方案

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

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

比在您的用户组件中

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>
     );
    }
}

推荐阅读