在选项卡中维护从父组件到子组件的生成数据

如何解决在选项卡中维护从父组件到子组件的生成数据

我有一个呈现 4 个导航选项卡的组件。 有一个滤色器可以过滤选项卡中显示的颜色。 （作为字符串列表保存）

但是，目前当我从选项卡切换到选项卡时，过滤器默认为空。例如，假设我在选项卡 1 上并向过滤器添加“红色”。当我导航到选项卡 2 时，过滤器再次为空（没有“红色”）。

有没有办法在这个过滤器中保存值（在主要组件中保存为字符串）？以便在我从选项卡导航到选项卡时传递值？

这是我当前代码的粗略草图：

const defaultColorCodes = [] as string[];
const HeadDetails: React.FC<{}> = () => {
    const [codes,setCodes] = useQueryParams({
        colorCodes: withDefault(ArrayParam,defaultColorCodes),});
    
    
    return (
      <NavigationDrivenTabs>
        <NavigationDrivenTab
          label="..."
          to={`...`}
          component={..'passes the string of filters'..}
        />
        <NavigationDrivenTab
          label="..."
          to={`...`}
          component={..'passes the string of filters'..}
        />
        <NavigationDrivenTab
          label="..."
          to={`...`}
          component={..'passes the string of filters'..}
        />
        <NavigationDrivenTab
          label="..."
          to={`...`}
          component={..'passes the string of filters'..}
        />
        <NavigationDrivenTab
          label="..."
          to={`...`}
          component={..'passes the string of filters'..}
        />
      </NavigationDrivenTabs>

导航标签是我实现的一个组件，用于格式化反应标签、标签组件