显示/隐藏 React 组件不维护内部 state

Question

I am trying to hide/show components in React based on some state. The main issue I am facing is to maintain the internal state of the components during hiding and showing. The below is the code that does what I expect and maintains the state of each of the components (Africa, Europe, America, Asia):

render() {
    const {selectedTab} = this.state;
    return (
        <div>
            <div className={selectedTab === 'africa' ? '' : 'hidden-tab'}><Africa /></div>
            <div className={selectedTab === 'europe' ? '' : 'hidden-tab'}><Europe /></div>
            <div className={selectedTab === 'america' ? '' : 'hidden-tab'}><America /></div>
            <div className={selectedTab === 'asia' ? '' : 'hidden-tab'}><Asia /></div>
        </div>
    )
}


//regions.scss
.hidden-tab {
   display: none
}

However, I am not satisfied with the cleanliness of the above code and would like to refactor, which is where I am facing issues. This is what I have done:

render() {
    const {selectedTab} = this.state;
    const tabToRegionMap = {
        'africa': <Africa />,
        'eruope': <Europe />,
        'america': <America />,
        'asia': <Asia />
    };
    const {[selectedTab]: selectedRegion, ...regionsToHide} = tabToRegionMap;

    return (
        <div>
            <div className={'hidden-tab'}>
                {Object.values(regionsToHide)}
            </div>
            {selectedRegion}
        </div>
    );

The above try does show/hide the copmonents but does not maintain the internal state of the components during hiding/showing - it seems like they are being unmounted and remounted every time.

Could anyone please help me solve the problem or suggest a better way of doing it? That would be much appreciated.

PS I would prefer not to move the state to the parent or Redux as there is a lot of boilerplate involved and the states of the individual components are very complex.

Answer 1

That happens because of Reacts reconciliation algorithm. When <ComponentA> is rendered on some place and on next render you render <ComponentB> on that place, the previous component is unmounted - and state is gone; you do this I suppose in {selectedRegion} it gets different component when user switches tab.

Usually you have to ways to implement tab like functionality:

• use display:none property on hidden tabs (state is not lost in that case because you just changed CSS prop)
• Render tab content as react component - and keep mounted only the active tab component (what you have basically, but state gets lost that way, so you need to lift state up )

---

But I think you can also try following approach:

let Tab = (props) => {
  let [state, setState] = React.useState(0);
  if (props.hide) return null;
  return <div onClick={() => setState(state + 1)}>{state}</div>;
};
export default function App() {
  let [hide, setHide] = React.useState(false);

  return (
    <div>
      <Tab hide={hide} />
      <div
        onClick={() => {
          setHide(!hide);
        }}
      >
        Hide/Show Tab
      </div>
    </div>
  );
}

Change tab state, then hide/show it, and see state is not lost. Although I haven't used this pattern much.

Answer 2

If I understand your question you are essentially looking for a way to clean up the code and keep the children components mounted.

The issue with the proposed solution is that each time it is rendered and supposed to hide tabs is it recreating the elements. They are swapping between being rendered into the <div className={'hidden-tab'}> and not, remounting each time when selected tab updates.

I suggest just abstracting the div elements into a new component that conditionally applies the 'hidden-tab' classname.

const Tab = ({ children, selectedTab, tab }) => (
  <div className={selectedTab === tab ? '' : 'hidden-tab'}>
    {children}
  </div>
);

...

render() {
  const {selectedTab} = this.state;
  return (
    <div>
      <Tab selectedTab={selectedTab} tab='africa'><Africa /></Tab>
      <Tab selectedTab={selectedTab} tab='europe'><Europe /></Tab>
      <Tab selectedTab={selectedTab} tab='america'><America /></Tab>
      <Tab selectedTab={selectedTab} tab='asia'><Asia /></Tab>
    </div>
  )
}

If you wanted to take it a step further, you could also abstract the wrapping div of these tabs into a container component that stored the selected tab and provided the value to children tabs via the Context API so a selectedTab wouldn't need to be explicitly passed to each.

Example:

import { createContext, useContext } from "react";

const TabContext = createContext({
  selectedTab: null
});

const useSelectedTab = () => useContext(TabContext);

const Tabs = ({ children, selectedTab }) => (
  <TabContext.Provider value={{ selectedTab }}>{children}</TabContext.Provider>
);

const Tab = ({ children, tab }) => {
  const { selectedTab } = useSelectedTab();
  return (
    <div className={selectedTab === tab ? "" : "hidden-tab"}>{children}</div>
  );
};

Usage:

render() {
  const {selectedTab} = this.state;
  return (
    <Tabs selectedTab={selectedTab}>
      <Tab tab='africa'><Africa /></Tab>
      <Tab tab='europe'><Europe /></Tab>
      <Tab tab='america'><America /></Tab>
      <Tab tab='asia'><Asia /></Tab>
    </div>
  )
}