根據所選菜單進行緩存內容更改

Question

我有這段代碼。

class Component { 
 
    
 
    state = { 
 
    selectedView: 'foo', 
 
    } 
 
    
 
    onMenuClicked(event, menuItem) { 
 
    switch(menuItem) { 
 
     case 'foo': 
 
     this.setState({ selectedView: 'foo'}) 
 
     break; 
 
     case 'bar': 
 
     this.setState({ selectedView: 'bar'}) 
 
     break; 
 
    } 
 
    } 
 
    
 
    renderBar() { 
 
    return <Bar />  
 
    } 
 

 
    renderFoo() { 
 
    return <Foo /> 
 
    } 
 
    
 
    renderContent() { 
 
    switch(this.state.selectedView) { 
 
     case 'foo': 
 
     return this.renderFoo(); 
 
     case 'bar': 
 
     return this.renderBar(); 
 
    } 
 
    } 
 
    
 
    render() { 
 
    return(
 
     <div> 
 
     <Menu onMenuSelected((e, menuItem) => this.onMenuClicked(e, menyItem)) /> // items foo and bar 
 
     {this.renderContent()} 
 
     </div> 
 
    ) 
 
    }

這工作得很好。然而，由於foo和bar成分很重以及用戶在這些組件之間切換的機率很高，我想有這種流動的，

• 在頁面加載，解析foo
• 如果欄第一次點擊，渲染欄
• 對於所有後續的菜單更改，只需隱藏/顯示foo/bar組件（基於單擊的菜單），並且不會在每次更改菜單時重新加載它們。

我需要適應我的代碼（最乾淨的方式）有這樣的行爲。任何幫助，將不勝感激。謝謝。

Answer 1

處理此問題的一種方法是在您的元素上使用display: none並跟蹤哪些元素已被顯示。這種方式反應將始終將渲染的組件保留在DOM中，並只更新display值。

class Component { 

    state = { 
    selectedView: 'foo', 
    foo: true // to indicate that foo has been rendered 
    } 

    onMenuClicked(event, menuItem) { 
    switch(menuItem) { 
     case 'foo': 
     this.setState({ selectedView: 'foo', foo: true}) 
     break; 
     case 'bar': 
     this.setState({ selectedView: 'bar', bar: true}) 
     break; 
    } 
    } 

    renderBar() { 
    const selected = this.state.selectedView === 'bar'; 

    if (!this.state.bar) { 
     return <div/> // don't render bar at all 
    } 
    return <div style={{display: selected ? 'block' : 'none'}}> 
     <Bar /> 
    </div> 
    } 

    renderFoo() { 
    const selected = this.state.selectedView === 'foo'; 

    if (!this.state.foo) { 
     return <div/> // don't render foo at all 
    } 
    return <div style={{display: selected ? 'block' : 'none'}}> 
     <Foo/> 
    </div> 
    } 

    renderContent() { 
    return <div> 
     {this.renderFoo()} 
     {this.renderBar()} 
    <div/> 
    } 

    render() { 
    return(
     <div> 
     <Menu onMenuSelected((e, menuItem) => this.onMenuClicked(e, menyItem)) /> // items foo and bar 
     {this.renderContent()} 
     </div> 
    ) 
    }