Question

我正在尝试制作一个页面，其中包含用于在组件之间导航的选项卡。但是必须保存组件实例。因为当我返回页面时，我不想重新渲染组件。

   import React, { Component } from 'react'

   class TabContent extends Component {

     constructor(props) {
       super(props)
       const Component = this.props.currentTab.id
       const activeTab = <Component />
       this.state = {
         openTabs: [activeTab],
         activeTab: 0
       }
     }

     componentWillReceiveProps(nextProps) {
       const index = nextProps.tabs.indexOf(nextProps.currentTab)
       if (nextProps.tabs.length > this.state.openTabs.length) {
         const Component = nextProps.currentTab.id
         const activeTab = <Component />
         this.setState({
           openTabs: this.state.openTabs.concat(activeTab),
           activeTab: index
         })
       } else {

         this.setState({
           activeTab: index
         })
       }

     }

     render() {
       const { activeTab, openTabs } = this.state
       const Component = openTabs[activeTab]
       return (
         openTabs[activeTab]
       )
     }
   }

   export default TabContent

这是反模式吗？还是没有意义的东西？

Answer 1

可以使用single page atom，例如使用redux来完成。如果将数据保留在组件inner state中，则当该组件呈现后，数据将消失...

Answer 2

解决方案是隐藏所有组件，并仅显示选定的组件。解决方法是here

有没有保存组件实例的方法

2 个答案: