如何在 ReactJS 中默认打开手风琴的第一个选项卡

Question

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}
>

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

Answer 1

使用要显示的选项卡初始化expandedSection并反转您的 isHidden 条件：

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