Reactjs 如何隐藏反应列表中的特定元素？

我想隐藏反应列表中的特定元素

这就是国家的样子：

 this.state = {
    lgShow: false,
    list: [ 
      { id:1, hidden: true },
      { id:2, hidden: true }
    ]
  };

  props.list.map( result => (
     <button onClick={toggle(result.id)}> Hide </button>
     { result.hidden && <div id={result.id}> .... </div>  }
  ))

这是组件的外观：

 this.state = {
    lgShow: false,
    list: [ 
      { id:1, hidden: true },
      { id:2, hidden: true }
    ]
  };

  props.list.map( result => (
     <button onClick={toggle(result.id)}> Hide </button>
     { result.hidden && <div id={result.id}> .... </div>  }
  ))

---

您需要使用

setState

方法来更新

list

的状态，这是在react中更新DOM的唯一方法。每次状态/道具更改时，DOM才会重新渲染。这就是React的工作原理

我已经更新了

toggle

函数，它现在迭代

列表

数组，并切换

id

隐藏标志，该标志在

toggle（id）

参数中传递

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
lgShow：错，
名单：[
{id:1，hidden:true}，
{id:2，hidden:true}
],
};
}//构造函数的结尾
切换=（id）=>{
const list=this.state.list.map（项=>{
如果（item.id==id）{
返回{…项，隐藏：！item.hidden}；
}
退货项目；
})
this.setState（{list}）
}//切换结束
render（）{
返回(
{list.map（结果=>(
切换（result.id）}>Hide
{result.hidden&&….}
))}
);
}
}

---

您需要使用

setState

方法来更新

列表的状态，这是在react中更新DOM的唯一方法。每次状态/道具更改时，DOM才会重新渲染。这就是React的工作原理

我已经更新了
toggle
函数，它现在迭代
列表
数组，并切换
id
隐藏标志，该标志在
toggle（id）
参数中传递


类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
lgShow：错，
名单：[
{id:1，hidden:true}，
{id:2，hidden:true}
],
};
}//构造函数的结尾
切换=（id）=>{
const list=this.state.list.map（项=>{
如果（item.id==id）{
返回{…项，隐藏：！item.hidden}；
}
退货项目；
})
this.setState（{list}）
}//切换结束
render（）{
返回(
{list.map（结果=>(
切换（result.id）}>Hide
{result.hidden&&….}
))}
);
}
}


您可以在内部切换到
setState（）

您可以在内部切换到
setState（）