2

我正在使用一个包含 50 个Accordion元素（语义 ui）的列表，如下所示：

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

如您所见，每个 Accordion Content 都有一个包含 100 个项目的列表。

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

这可能吗？

4

1 回答 1

1

跟踪状态中打开了哪些手风琴，并使用该状态有条件地呈现手风琴的List标签。

例如，如果您通过设置/删除键来跟踪打开的手风琴，this.state.openAccordions并且您正在渲染一个数组accordions：

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>
})
于 2017-06-10T05:30:24.677 回答