為每個 div 顯示更多和更少顯示

Question

當我單擊特定的show more按鈕時，應顯示內容，條件是整個組件不應重新渲染
當我單擊button時，我使用了useState ，它正在重新渲染整個組件，重新渲染每個 div 需要很長時間，為此提供了一個簡單的解決方案。

const [arr,setmarr] =useState([])
const oncl=(e)=>{
setarr((prev)=>[...prev,e.target.value])
}
return{
divarray.map((i,j)=>{
        {console.log("tdic)")}
        return(
          <Commentbox divarr={arr[j]} value={j} oncl={(e)=>oncl(e) } />
        )
        }
      }

評論框組件

return 
<div>
  div{j}

// some icons here

{divarr && <div> right side div </div>}
<button onClick={(e)=>{oncl(e)}}  value={j} >see more</button >
</div>

onClick之前展示showmore

在第二個 div 上單擊showmore按鈕后

Answer 1

您應該將每個框更改為一個組件以解決此問題。 使用 class 基本組件制作該組件，因為您需要getSanpShotBeforeUpadte 。

getSanpShotBeforeUpadte ：您可以使用此方法控制組件的渲染。不要忘記此方法將為您提供 nextProps、nextState 和快照作為參數

class Box extends Component{
  state = {
    // more
    showMore: false,
  }

  getSnapshotBeforeUpdate(nextProps,nextState){
    // OTHER CONDITIONS
    
    if(nextState.showMore !== this.state.showMore) return true
    return false
  }

  render(){
    return (
      <div>
        {/* CODE ... */}
        <div style={{display: this.state.showMore ? 'block' : 'none'}}>
          HERE IS A TEXT 
        </div>
        <button onClick={()=>this.setState({showMore: !this.state.showMore})}>show more</button>
      </div>
    )
  }
}