如何在反应js中默认打开手风琴的第一个刺拳答案

【问题标题】：how to make 1st tab of accordian open by default in reactjs如何在反应js中默认打开手风琴的第一个刺拳
【发布时间】：2020-05-21 13:34:02
【问题描述】：

interface Props{
data: string;
}    
interface State {
  expandedSection: string;
}



<AccordionToggle
              onClick={(event) => {
                this.onToggle(path, event);
              }}
              isExpanded={this.state.expandedSection === data}
              id={path}

            >
     <AccordionContent
              id="ex-expand1"
              isHidden={this.state.expandedSection !== data}
            >
     <p>{sampledata} <p>

            </AccordionContent>

手风琴有多个标签，我希望默认打开第一个标签。目前默认所有选项卡都关闭。如果我会这样做：

 <AccordionContent
              id="ex-expand1"
              isHidden={this.state.expandedSection === data}
            >

然后所有选项卡将默认打开。谁能帮我解决这个问题，如何在手风琴中打开多个标签中的第一个标签

【问题讨论】：

数据包含什么？
数据是一个字符串。
我可以在 isHidden={this.state.expandedSection === data} 中添加的任何条件，以便只有第一个选项卡保持打开状态，其他选项卡保持关闭状态。
请展示渲染整个手风琴状态的组件

标签： javascript reactjs typescript accordion

【解决方案1】：

使用您要显示的标签初始化expandedSection 并反转您的 isHidden 条件：

class YourComponent extends React.Component {
  state = { expandedSection: 'tab1' }

  // ... other stuff
}

【讨论】：

如何区分标签 1 和其他标签？
你能添加完整的代码吗，我不确定你的data来自哪里。
data 是字符串类型的道具。这是我的 onToggle 方法： onToggle = (id, event) => { event.preventDefault(); if (id === this.state.expandedSection) { this.setState({ expandSection: "" }); } else { this.setState({ expandSection: id }); } };