Reactjs React JS可重用的折叠/切换功能

我试图使可重用的切换功能

组件初始状态：

constructor(props) {
    super(props);

    this.state = {
        collapseFirst: false,
        collapseSecond: false
    };
}

切换功能（应根据单击的折叠目标更改真/假状态）：

渲染元素（使用折叠组件）：

返回(
第一次崩溃
一些文本

二次崩塌
一些其他文本

);

问题在于，出于某种原因，collapseItem返回预期的数据控制值，但this.state.collapseItem未定义

---

我做错了什么？

你把变量名和值搞混了。别担心，尤其是对于一些ES6语法，它发生在我们中最好的人身上

collapseItem

不是此.state的属性。

this.state

对象上的唯一属性是

collapseFirst

和

collapseSecond

在

handleToggle（）

中，创建一个名为

collapseItem

的常量。本声明：

[collapseItem]: !this.state.collapseItem

使用ES6。这将采用

collapseItem

的字符串值，并在对象上创建一个属性，该属性的值作为键

由于

collapseItem

的值应该是

'collapseFirst'

或

'collapseSecond'

，这意味着我们将在名为

collapseFirst

或

collapseSecond

的对象上创建一个属性，而不是

collapseItem

声明

!this.state.collapseItem

将始终返回

true

，因为正如我所说，

this.state.collapseItem

不存在，因此将返回

未定义的
<代码>！未定义的
为
真

我相信你的意思是：

[collapseItem]: !this.state[collapseItem]

这将从现有状态获取相应属性的值

另外，请注意，当新状态依赖于以前的状态时，通常应使用以下
setState（）
重载：

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

请仔细阅读

[collapseItem]: !this.state[collapseItem]

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