需要至少一个道具传递给组件[打字稿] [重复]

Posted 2023-03-13

【中文标题】需要至少一个道具传递给组件[打字稿] [重复]

【英文标题】：Require at least one prop to be passed to component [typescript] [duplicate]

【发布时间】：2021-03-02 03:04:35

【问题描述】：

快速提问 - 假设我有一个这样的组件：

interface ComponentInterface 
    nameA: string;
    nameB?: string;


const Component: React.FC<ComponentInterface> = (props) => 
     const  nameA, nameB  = props 
     const name = nameB || nameA;

     return <div>Hello World! Name: name</div>

如果我们不传递 nameA，Typescript 中是否有办法强制 nameB？

写<Component nameA="" nameB="John" />感觉不好，我不想把nameA变成nameA?: string，因为我至少要传递一个props。

这是一个过于简化的 c 版本。提早提！

【参考方案1】：

是的，你可以使用联合类型：

interface Props1 
    nameA: string;
    nameB?: string;


interface Props2 
    nameB: string;


type Props = Props1 | Props2

意思是，如果你通过nameA，nameB 是可选的。但是如果你没有通过nameA - nameB 是必需的。