如何使多个崩溃的动态状态(代码片段)

关键词：

const myData = [
  
    id: '1',
    nameHeader: 'Header1',
    subMenu: [ id: '1', name: 'subMenu1' ,  id: '2', name: 'subMenu2' ]
  ,
  
    id: '2',
    nameHeader: 'Header2',
    subMenu: [ id: '1', name: 'subMenu1' ,  id: '2', name: 'subMenu2' ]
  
]

class Myclass extends Component 
  state =  open: false 

  handleClick = () => 
    this.setState(state => ( open: !state.open ))
  

  render() 
    const  open  = this.state
    return (
      <div style= marginRight: '15px' >
        <List component="nav">
          myData.map(each => (
            <React.Fragment key=each.id>
              <ListItem button onClick=this.handleClick>
                <ListItemText inset primary=each.nameHeader />
                open ? <ExpandLess /> : <ExpandMore />
              </ListItem>
              <Divider />
              <Collapse in=open timeout="auto" unmountOnExit>
                <List component="div" disablePadding>
                  each.subMenu.map(subData => (
                    <ListItem key=subData.id button>
                      <ListItemText inset primary=subData.name />
                    </ListItem>
                  ))
                </List>
              </Collapse>
            </React.Fragment>
          ))
        </List>
      </div>
    )
  

export default Myclass

我认为我的问题是我可以，为主菜单设置唯一的状态“打开”

不知何故，是的。您有两个不同的（子）菜单，您希望折叠/展开而不影响其他菜单。考虑到这一点，您需要创建一个单独保存每个菜单的当前“打开”状态的可能性。

您已经拥有不同菜单的唯一ID，您可以使用它们来实现目标。一种方法是使用菜单的相关设置扩展您的状态：

state =  settings: [ id: "1", open: false ,  id: "2", open: false ] ;

这使您可以获得有关每个菜单的折叠状态的信息。

根据你需要扩展你的handleClick函数，以便只更改你单击的菜单项的状态：

handleClick = id => 
  this.setState(state => (
    ...state,
    settings: state.settings.map(item =>
      item.id === id ?  ...item, open: !item.open  : item
    )
  ));
;

在渲染功能中，您需要确保将所单击的菜单项的正确ID传递给handleClick函数，并选择正确的打开状态。

<React.Fragment key=each.id>
  <ListItem button onClick=() => this.handleClick(each.id)>
    <ListItemText inset primary=each.nameHeader />
    settings.find(item => item.id === each.id).open
    ? "expanded"
    : "collapsed"
  </ListItem>
  <Divider />
  <Collapse
    in=settings.find(item => item.id === each.id).open
    timeout="auto"
    unmountOnExit
  >
  <List component="div" disablePadding>
    each.subMenu.map(subData => (
      <ListItem key=subData.id button>
        <ListItemText inset primary=subData.name />
      </ListItem>
     ))
   </List>
 </Collapse>
</React.Fragment>

看到它在这里工作：https://codesandbox.io/s/6xjz837j9z

如何使microsoftword的宏生成多个文档？(代码片段)

...，但是对于我正在使用的不同信息。有人可以帮我弄清楚如何在MY宏中获得相同的功能吗？具有多个文档的示例宏：这是已经有效的宏，一位同事做了：Substate()DimstrTempF41AsStringDimstrDateType 查看详情

如何使自动布局约束依赖于多个其他锚点？(代码片段)

如何使用自动布局使视图的高度等于另外两个视图高度的总和？例如：viewA.heightAnchor.constraint(equalTo:...),viewB.heightAnchor.constraint(equalTo:...),viewC.heightAnchor.constraint(equalTo:viewA.heightAnchor+viewB.heightAnchor)是否存在不涉及 查看详情

如何使多个类包含相同的静态方法名称？(代码片段)

我创建了一个IUserModel，它有几个方法，每个子类都将实现。我有两个用户类型类：CoordinateLeaderModel和CommunityMemberModel每个对象都包含一个名为“createFromJson（...）”的静态方法，该方法对于每个模型都是唯一的。我想知道是否有... 查看详情

动态规划2——完全背包问题解析(代码片段)

...的是，每个物品都有无限个，对于同一个物品，可以放置多个。基本解法首先还是先来用基本解法来一遍，不带优化的。先看多个物品的状态转移方程。当不选择该物品时候，这个时候值跟01背包的一样，还是dp[ 查看详情

动态规划2——完全背包问题解析(代码片段)

...的是，每个物品都有无限个，对于同一个物品，可以放置多个。基本解法首先还是先来用基本解法来一遍，不带优化的。先看多个物品的状态转移方程。当不选择该物品时候，这个时候值跟01背包的一样，还是dp[ 查看详情

如何在vue中动态添加类名(代码片段)

作者：MichaelThiessen译者：前端小智来源：forum.vuejs.org/能够向组件添加动态类名是非常强大的功能。它使我们可以更轻松地编写自定义主题，根据组件的状态添加类，还可以编写依赖于样式的组件的不同变体。... 查看详情

如何使一个按键分别触发多个事件(代码片段)

TL;DR：每次用户按空格键时，我都希望出现下一行对话框。上下文：我刚开始学习编写过去几周的代码（第一个基本的html＆css，现在是JS）。我大多使用freecodecamp和YouTube。为了帮助我更有创造性地学习，我想我会开始制作一个基... 查看详情

应用问题程序运行崩溃分析(代码片段)

...题。但是如果复现概率极低、代码量大，程序运行时依赖多个动态的库，程序strip后debug信息被移除等情况下，通过程序崩溃时产生的back 查看详情

如何使多个dns指向kubernetes中的一个服务(代码片段)

当我们使用docker-compose时，我们可以通过links将多个别名映射到一个容器/服务。例如，bucket1.s3和bucket2.s3是容器s3的别名。现在，当我们转向kubernetes时，我正在尝试使用服务发现来做同样的事情并链接容器。我现在能想到的是为... 查看详情

text使navbar重叠崩溃(代码片段)

查看详情

如何动态更改多个textview中的文本？[重复](代码片段)

这个问题在这里已有答案：TextViewstextchangeinaforloop4个答案我需要使用for循环设置布局中已存在的一些textView的文本。例如。TextView_01，TextView_02等。有没有办法做类似下面的推测代码：for(1in0..6)TextView_0(changevaluewithi).text=something答... 查看详情

如何使多个 nbm 模块的 jar 状态相同？

】如何使多个nbm模块的jar状态相同？【英文标题】：Howtogetsamestateofjartomultiplenbmmodules?【发布时间】：2021-03-1923:23:14【问题描述】：我的NetBeans平台应用程序有两个nbm模块A和B以及一个jar项目。NB模块依赖于包含名为Engine的单例类... 查看详情

递增动态原型使 XCode 4.5.1 崩溃

】递增动态原型使XCode4.5.1崩溃【英文标题】：IncrementingDynamicPrototypescrashesXCode4.5.1【发布时间】：2012-10-2517:47:39【问题描述】：我在UIStoryboard中创建一个场景，其中UIViewController的UITableView高44点。我的计划是拥有4或5个动态原型单... 查看详情

设计模式之状态模式(代码片段)

...对象称为有状态的对象，而把影响对象行为的一个或多个动态变化的属性称为状态。当有状态的对象与外部事件产生互动时，其内部状态就会发生改变，从而使其行为也发生改变。如人都有高兴和伤心的时候，不... 查看详情

如何动态回显php$_get变量的多个结果(代码片段)

我有以下代码，它根据数据库中的内容动态显示一个表：$sql="SELECT*fromusersWHEREpin='".mysqli_real_escape_string($link,$_SESSION['pin'])."'";$result=mysqli_query($link,$sql)ordie("badquery:$sql");echo"<formmethod='GET'name='c 查看详情

多个同名的动态库使用时如何避免冲突(代码片段)

一、Background    最近项目里需要使用sm4，使用了阿里开源的基于openssl二次开发的库。    加解密demo（go实现）：https://github.com/AtaoistPriest/sm4-goland。点亮吼吼吼。    代码使用没有任何问题，但在部署的... 查看详情

如何在网页上显示多个动态表格(代码片段)

...桌子调整自己。我还想在4个不同的列中查看布局。那么如何4列表;该表可以有不同的行数，但它们都调整得很好，所以我没有得到任何空白区域。这是我的表格的HTML： 查看详情

SocketTimeoutException 使应用程序崩溃

...片段时，我遇到了崩溃。请帮我解决这个问题。我不知道如何以及在哪里可以捕获或处理该异常。感谢您的建议代码运行的地方override 查看详情