显示/隐藏 React 组件不会保持内部状态

Question

我正在尝试根据某些状态在 React 中隐藏/显示组件。我面临的主要问题是在隐藏和显示期间保持组件的内部状态。下面是执行我期望的代码并维护每个组件（非洲、欧洲、美洲、亚洲）的状态：

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
}

但是，我对上述代码的简洁性不满意，并想重构，这是我面临的问题。这就是我所做的：

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

上述尝试确实显示/隐藏了组件，但在隐藏/显示期间不保持组件的内部状态 - 似乎每次都在卸载和重新安装它们。

谁能帮我解决问题或提出更好的解决方法？那将不胜感激。

PS 我不希望将状态移动到父级或 Redux，因为这涉及到很多样板，并且各个组件的状态非常复杂。

Answer 1

如果我理解您的问题，您实际上是在寻找一种清理代码的方法并保持子组件的安装。

建议的解决方案的问题是，每次渲染并隐藏选项卡时，它都会重新创建元素。它们在渲染到<div className={'hidden-tab'}> 和不渲染之间切换，每次选择的选项卡更新时都重新安装。

我建议将div 元素抽象为一个有条件地应用'hidden-tab' 类名的新组件。

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

如果您想更进一步，您还可以将这些选项卡的包装 div 抽象为一个容器组件，该容器组件存储所选选项卡并通过上下文 API 为子选项卡提供值，因此 selectedTab不需要显式传递给每个。

例子：

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

用法：

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