javascript - React 折叠菜单会使用很多的state，有没有其他好的办法呢？

Question

就下面这中，点击隐藏内容和显示内容，逻辑非常简单，但是如果使用state的话，它们并不能使用一个状态，所以要分别一个sate，这个太麻烦了，如果使用点击事件添加类的方式，又失去了react的概念，请问这种大家是怎么样实现的呢?

Answer 1

this.state = {
    isShow:{
        item1: true,
        item2: true,
        item3: true,
        item4: true,
        item5: true,
        ...
    }
}

Answer 2

如果你是在组件内部写state，那么只需要一个简单数据结构：

    this.state = {
        listStatus: bool  
    }

因为组件内部的状态是不会共享的，无论你这个组件在同一个页面被调用了多少次，每个组件只维护自己内部的state。

Answer 3

这种需求，肯定得要一个 item 一个状态信息，要不怎么可能做得出来。
只是这个信息，是放在state还是放在什么地方罢了。

如果打开关闭的状态不算“业务数据”的一部分（即你的业务不需要纪录这种状态），那么可以简单的作为传统DOM方式来操作。click的时候检测到有active的class就关闭，反之就打开。

这并没有什么失去react的概念。为了pattern而pattern才是anti-pattern。