ReactJS：渲染仅在需要

Question

我使用的50个 Accordion -elements（语义UI）像这样的列表

一些组件：

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

正如你所看到的，是具有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> 
})