ReactJS：只按需渲染一些组件

Question

我正在使用一个包含 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 内容都有 100 个项目。

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

这可能吗？

Answer 1

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

例如，如果您通过 this.state.openAccordions 中的 setting/deleting 键跟踪打开的手风琴，并且您正在呈现 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>
})

ReactJS：只按需渲染一些组件

ReactJS: Render some components only on demand

javascript

asynchronous

reactjs

semantic-ui

semantic-ui-react