问题

我有这个简单的组件，它的props包括一个字符串数组（标签）和子组件（要渲染的组件）。我想直接从类型声明中检查提供的子组件是否与标签数组的长度相同，或者有任何更干净的方法来处理这个检查。

type TabsProps = {
tabs: string[];
children: ReactNode | ReactNode[];
};

const Tabs = ({ tabs, children }: TabsProps) => {
const [activeTab, setActiveTab] = useState(0);

const componentsToRender = Children.toArray(children);

//TODO 以更干净的方式处理这个检查
if (componentsToRender.length !== tabs.length) {
throw new Error('Your components or tabs are not of equal length');
}

const handleTabSwitch = (index: number) => {
setActiveTab(index);
};

return (




{componentsToRender.map((component, i) => {
return activeTab === i ? component : null;
})}


);
};

export default Tabs;

<details>
<summary>英文:</summary>

I have this simple component which takes as props an array of strings (tabs) and children (component to be rendered). I want to check if the provided children are of the same length as the tabs array directly from the type declaration or any cleaner way to handle this check. 

type TabsProps = {
tabs: string[];
children: ReactNode | ReactNode[];
};

const Tabs = ({ tabs, children }: TabsProps) => {
const [activeTab, setActiveTab] = useState(0);

const componentsToRender = Children.toArray(children);

//TODO Handle this check in a cleaner way
if (componentsToRender.length !== tabs.length) {
throw new Error('Your components or tabs are not of equal length');
}

const handleTabSwitch = (index: number) => {
setActiveTab(index);
};

return (
<TabWrapper>
<TabHeader tabs={tabs} activeTab={activeTab} onTabSwitch={handleTabSwitch} />
<Dividers />
<TabContent>
{componentsToRender.map((component, i) => {
return activeTab === i ? component : null;
})}
</TabContent>
</TabWrapper>
);
};

export default Tabs;

As shown in the code snippet, I handled it with a simple if condition that throws an error
But I would rather it be handled while coding instead of at runtime

</details>


# 答案1
**得分**: 1

可以定义一个类型，用于检查子数组的长度是否与标签数组的长度相匹配：

type TabsProps<T extends string[]> = {
  tabs: T;
  children: { [K in keyof T]: ReactNode };
};

const Tabs = <T extends string[]>({ tabs, children }: TabsProps<T>) => {
  const [activeTab, setActiveTab] = useState(0);

  const componentsToRender = Children.toArray(children);

  const handleTabSwitch = (index: number) => {
    setActiveTab(index);
  };

  return (
    <TabWrapper>
      <TabHeader tabs={tabs} activeTab={activeTab} onTabSwitch={handleTabSwitch} />
      <Dividers />
      <TabContent>
        {componentsToRender.map((component, i) => {
          return activeTab === i ? component : null;
        })}
      </TabContent>
    </TabWrapper>
  );
};

export default Tabs;

type TabsProps<T extends string[]> = {
  tabs: T;
  children: { [K in keyof T]: ReactNode };
};

const Tabs = <T extends string[]>({ tabs, children }: TabsProps<T>) => {
  const [activeTab, setActiveTab] = useState(0);

  const componentsToRender = Children.toArray(children);

  const handleTabSwitch = (index: number) => {
    setActiveTab(index);
  };

  return (
    <TabWrapper>
      <TabHeader tabs={tabs} activeTab={activeTab} onTabSwitch={handleTabSwitch} />
      <Dividers />
      <TabContent>
        {componentsToRender.map((component, i) => {
          return activeTab === i ? component : null;
        })}
      </TabContent>
    </TabWrapper>
  );
};

export default Tabs;