道具傳播與 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>
);