Reactjs 使用缓存根据所选菜单响应内容更改

我有这个密码

类组件{
状态={
selectedView:'foo'，
}
onMenuClicked（事件，菜单项）{
开关（菜单项）{
案例“foo”：
this.setState（{selectedView:'foo'}）
打破
“酒吧”一案：
this.setState（{selectedView:'bar'}）
打破
}
}
renderBar（）{
返回
}
renderFoo（）{
返回
}
renderContent（）{
开关（this.state.selectedView）{
案例“foo”：
返回这个.renderFoo（）；
“酒吧”一案：
返回这个.renderBar（）；
}
}
render（）{
返回(
this.onMenuClicked（e，menyItem））/>//项目foo和bar
{this.renderContent（）}
)
}

处理此问题的一种方法是对元素使用

显示：无

，并跟踪哪些元素已经显示。这种方法将始终将渲染组件保留在DOM中，并且只更新

显示

值

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

类组件{
状态={
selectedView:'foo'，
foo:true//表示已呈现foo
}
onMenuClicked（事件，菜单项）{
开关（菜单项）{
案例“foo”：
this.setState（{selectedView:'foo'，foo:true}）
打破
“酒吧”一案：
this.setState（{selectedView:'bar'，bar:true}）
打破
}
}
renderBar（）{
const selected=this.state.selectedView==='bar'；
如果（！this.state.bar）{
return//根本不渲染条
}
返回
}
renderFoo（）{
const selected=this.state.selectedView==“foo”；
如果（！this.state.foo）{
return//根本不渲染foo
}
返回
}
renderContent（）{
返回
{this.renderFoo（）}
{this.renderBar（）}
}
render（）{
返回(
this.onMenuClicked（e，menyItem））/>//项目foo和bar
{this.renderContent（）}
)
}