Javascript ReactJS：仅根据需要渲染某些组件

我使用了50个手风琴元素（语义用户界面）的列表，如下所示：

<Accordion>
    <Accordion.Title>
        <TextArea
            defaultValue={ value }
            autoHeight
        />
    </Accordion.Title>
    <Accordion.Content>
        <List>
            <List.Item>100 Items</List.Item>
        <List>
    </Accordion.Content>
</Accordion>

100项

如您所见，有一个列表，其中每个手风琴内容有100个项目

所以现在100个列表项被渲染50次。但我希望只有在打开特定的手风琴时才能渲染它们。这意味着首先渲染所有100个Accordion元素，但根本没有列表项。如果用户打开手风琴，则会呈现列表

---

这可能吗？

跟踪在状态中打开的手风琴，并使用状态有条件地呈现手风琴的

列表

标记

例如，如果您通过在

this.state.openAccordions

中设置/删除关键点来跟踪打开的手风琴，并且您正在呈现一组

手风琴

：

return accordions.map((accordion, key) => {
    return <Accordion key={key}>
        <Accordion.Title>
            <TextArea
                defaultValue={ value }
                autoHeight
            />
        </Accordion.Title>
        <Accordion.Content>
            { /* only render <List> if Accordion is open */ }
            {(key in this.state.openAccordions) && <List>
                <List.Item>100 Items</List.Item>
            <List>}
        </Accordion.Content>
    </Accordion>
})

返回accordions.map（（accordion，key）=>{
返回
{/*仅当手风琴打开时渲染*/}
{（输入this.state.openAccordions）&
100项
}
})