Javascript 如何在reactjs中默认打开手风琴的第一个选项卡 界面道具{ 数据：字符串； } 界面状态{ 展开部分：字符串； } { 此.ontogle（路径、事件）； }} isExpanded={this.state.expandedSection==data} id={path} >

{sampledata} 手风琴有多个选项卡&我希望默认情况下打开第一个选项卡。当前默认情况下，所有选项卡都已关闭。如果我愿意：

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>

默认情况下，所有选项卡都将打开。

---

有人能帮我吗？如何在accordian中打开多个选项卡中的第一个选项卡

使用要显示的选项卡初始化

expandedSection

，并反转您的isHidden状态：

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

---

数据包含什么？数据是一个字符串。我可以在isHidden={this.state.expandedSection===data}中添加任何条件，以便只有第一个选项卡保持打开，其他选项卡保持关闭。请显示呈现整个手风琴状态的组件。我如何区分选项卡1和其他选项卡？能否添加完整代码，我不确定你的

数据来自哪里。数据是字符串类型的道具。这是我的onToggle方法：onToggle=（id，event）=>{event.preventDefault（）；if（id==this.state.expandedSection）{this.setState（{expandedSection:}）；}else{this.setState（{expandedSection:id}）；}；
class YourComponent extends React.Component {
  state = { expandedSection: 'tab1' }

  // ... other stuff
}