Reactjs 如何切换多个隐藏/显示状态

我很难想出一种方法，允许我在不硬编码每个显示组件的功能的情况下打开和关闭多个显示。 我想知道是否有一种方法可以通过一个类似于like和onChange事件的函数来切换这些显示状态

    this.state = {
        showOne: false,
        showTwo: false
    }


display = () => {
let { name, value } = e.target
    this.setState({ [name]: !value })
}

return(
<button name={showOne} value={this.state.showOne} onClick={this.display}>
{!showOne
? (
null
) : (
<div><ComponentOne/></div>
)}

</button
<button name={showtwo} value={this.state.showTwo} onClick={this.display}>
</button
{!showTwo
? (
null
) : (
<div><ComponentTwo/></div>
)}

this.state={
第一：错，
第二：错误
}
显示=（）=>{
设{name，value}=e.target
this.setState（{[name]：！value}）
}
返回(
{！showOne
? (
无效的
) : (
)}
您可以使用内联函数对其进行设置，该内联函数传入一个标识符，然后将该标识符用作状态中的键：

onClick={() => toggle(itemName)}

另一个选项是为按钮定义一个组件，该组件使用
name
和
onClick
道具，并让该组件的内部onClick调用带有该名称的道具onClick。（很难从手机编写示例代码。如果不清楚，我可以更新。）

工作的Tyvm

toggle = (itemName) => {
  this.setState({ [itemName]: !this.state[itemName] });
}

   toggleDisplay = (name) => {
    this.setState({ 
        [name]: !this.state[name]
    })
}

onClick={()=> this.toggleDisplay('showOne')}