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