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 Content有100个项目。

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

这有可能吗？

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

ReactJS：仅按需渲染一些组件

1 个答案: