道具传播与 typescript 反应

Question

我有一些这样的代码：

type WrapperProps = { wrapperProp: string };

const Wrapper: React.FC<WrapperProps> = ({ children }) => <div>{children}</div>;

type MyCmpnntProps = { myCmpnntProp: string };

const MyCmpnnt: React.FC<MyCmpnntProps> = (props) => (
  <Wrapper {...props}>MyCmpnnt in a Wrapper</Wrapper>
);

如果我做这个改变它工作正常

type MyCmpnntProps = WrapperProps & { myCmpnntProp: string };

我想知道是否有办法不进行类型联合。 在我看来，React.FC 应该自己做这件事，还是我错了？

Answer 1

TL;DR：你错了，类型系统根本不是这样工作的。

当你告诉编译器时：我有一个方法接受类型为 MyCmpnntProps 的变量，它期望你说你会给出什么，不多也不少。 如果你还想传递包装器的道具，你需要通过为 MyCmpnntProps 类型或在组件定义中创建联合来告诉编译器，如下所示：

type WrapperProps = { wrapperProp: string };

const Wrapper: React.FC<WrapperProps> = ({ children }) => <div>{children} 
</div>;

type MyCmpnntProps = { myCmpnntProp: string };

// Merge the types in the component definition
const MyCmpnnt: React.FC<MyCmpnntProps & WrapperProps> = (props) => (
  <Wrapper {...props}>MyCmpnnt in a Wrapper</Wrapper>
);