reactjs - 在 TypeScript 中強制子組件的屬性類型

我正在嘗試在子組件中強制規定屬性的類型。我原本預期以下代碼不會編譯，因為在應用程序中的 Parent 裡 Child 的 name 屬性類型不正確，但它沒有顯示任何編譯警告。

有沒有一種方法可以實現這個目標：如果我有一個 <Parent<"a">>，它不允許子元素的 prop 名稱不等於 “a” 的情況？

type ChildProps<T> = {
  name: T;
};

type parentProps<T extends string> = {
  children: React.ReactElement<ChildProps<T>>;
};

function Parent<T extends string>({ children }: parentProps<T>) {
  return <div>{children}</div>;
}

function Child({ name }: ChildProps<"b">) {
  return <div>{name}</div>;
}

function App() {
  return (
    <Parent<"a">>
      <Child name="b" />
    </Parent>
  );
}

答案＃1

你不能！而且這是 TS 一個令人沮喪的未解決問題之一。請參閱此問題。