Javascript 如何在react中默认打开所有可折叠项？

我已经用reactstrap制作了一个可折叠的按钮，里面有令牌，所有的东西都可以很好地用于按钮点击折叠

我想让这个场景保持原样，但另一方面，我如何修改它，使所有可折叠按钮在页面的初始呈现时打开

在访问页面时，所有标记都需要可见，这意味着所有可折叠项都需要打开

如果我们给

this.state = {
      open: [0 , 1, 2]
    };

然后它会被打开，但对于这篇文章，它会起作用，而在实际应用中，我不知道确切的索引是什么，所以像这样硬编码是行不通的

请帮助我打开所有要在初始状态下打开的可折叠数据的

n

，单击按钮后，它应该与现在（打开/关闭）令牌一样

const data=[{“orderId”：1，“orderNo”：“123”，“orderParts”：[{“orderPartsId”：1，“orderPrtNo”：“OP-1”，“regTokens”：[“Token1”，“Token2”，“Token3”]}]，
{“orderId”：2，“orderNo”：“456”，“orderParts”：[{“orderPartsId”：1，“orderPrtNo”：“OP-1”，“regTokens”：[“Token1”，“Token3”]}]，
{“orderId”：3，“orderNo”：“789”，“orderParts”：[{“orderPartsId”：1，“orderPrtNo”：“OP-1”，“regTokens”：[“Token1”，“Token2”，“Token3”，“Token4”]}]
]
常量{Component，Fragment}=React；
const{Button，Collapse}=Reactstrap；
类菜单扩展组件{
建造师（道具）{
超级（道具）；
此.state={
打开：[]
};
}
切换=idx=>（）=>{
this.setState（prevState=>（{open:this.state.open.includes（idx）？prevState.open.filter（x=>x！==idx）：[…prevState.open，idx]}）
)}
render（）{
const{open}=this.state；
返回
{
data.map（（levelOneItem，i）=>{
返回(
订单Id:{levelOneItem.orderId}
{
levelOneItem.orderParts.map（（levelTwoItem，j）=>{
返回(
订单部件Id:{levelTwoItem.orderPartsId}
显示令牌
{
{levelTwoItem.regTokens.map（（levelTwoItem，k）=>{
返回（{levelThreeItem}）
})
}
}
)
})
}
)
})
}
;
}
}
render（，document.getElementById（“根”））
如果您希望在初始化时打开所有文件

这意味着所有项目的索引列表

您可以根据数据长度生成类似于
[0，1，2…]
的列表

this.state = {
  open: [...Array(data.length).keys()]
}


const data=[{“orderId”：1，“orderNo”：“123”，“orderParts”：[{“orderPartsId”：1，“orderPrtNo”：“OP-1”，“regTokens”：[“Token1”，“Token2”，“Token3”]}]，
{“orderId”：2，“orderNo”：“456”，“orderParts”：[{“orderPartsId”：1，“orderPrtNo”：“OP-1”，“regTokens”：[“Token1”，“Token3”]}]，
{“orderId”：3，“orderNo”：“789”，“orderParts”：[{“orderPartsId”：1，“orderPrtNo”：“OP-1”，“regTokens”：[“Token1”，“Token2”，“Token3”，“Token4”]}]
]
常量{Component，Fragment}=React；
const{Button，Collapse}=Reactstrap；
类菜单扩展组件{
建造师（道具）{
超级（道具）；
此.state={
打开：[…数组（data.length）.keys（）]
};
}
切换=idx=>（）=>{
this.setState（prevState=>（{open:this.state.open.includes（idx）？prevState.open.filter（x=>x！==idx）：[…prevState.open，idx]}）
)}
render（）{
const{open}=this.state；
返回
{
data.map（（levelOneItem，i）=>{
返回(
订单Id:{levelOneItem.orderId}
{
levelOneItem.orderParts.map（（levelTwoItem，j）=>{
返回(
订单部件Id:{levelTwoItem.orderPartsId}
显示令牌
{
{levelTwoItem.regTokens.map（（levelTwoItem，k）=>{
返回（{levelThreeItem}）
})
}
}
)
})
}
)
})
}
;
}
}
render（，document.getElementById（“根”））
如果您希望在初始化时打开所有文件

这意味着所有项目的索引列表

您可以根据数据长度生成类似于
[0，1，2…]
的列表

this.state = {
  open: [...Array(data.length).keys()]
}


const data=[{“orderId”：1，“orderNo”：“123”，“orderParts”：[{“orderPartsId”：1，“orderPrtNo”：“OP-1”，“regTokens”：[“Token1”，“Token2”，“Token3”]}]，
{“orderId”：2，“orderNo”：“456”，“orderParts”：[{“orderPartsId”：1，“orderPrtNo”：“OP-1”，“regTokens”：[“Token1”，“Token3”]}]，
{“orderId”：3，“orderNo”：“789”，“orderParts”：[{“orderPartsId”：1，“orderPrtNo”：“OP-1”，“regTokens”：[“Token1”，“Token2”，“Token3”，“Token4”]}]
]
常量{Component，Fragment}=React；
const{Button，Collapse}=Reactstrap；
类菜单扩展组件{
建造师（道具）{
超级（道具）；
此.state={
打开：[…数组（data.length）.keys（）]
};
}
切换=idx=>（）=>{
this.setState（prevState=>（{open:this.state.open.includes（idx）？prevState.open.filter（x=>x！==idx）：[…prevState.open，idx]}）
)}
render（）{
const{open}=this.state；
返回
{
data.map（（levelOneItem，i）=>{
返回(
订单Id:{levelOneItem.orderId}
{
levelOneItem.orderParts.map（（levelTwoItem，j）=>{
返回(
订单部件Id:{levelTwoItem.orderPartsId}
显示令牌
{
{levelTwoItem.regTokens.map（（levelTwoItem，k）=>{
返回（{level