如何將組件的類型斷言為 prop？

Question

我正在嘗試將組件作為道具傳遞。

組件：

export type ItemProps= {
  //...
};

export const Item = ({ /* ... */ }: ItemProps) => {
  return (
    //...
  );
};

我試圖通過它的地方：

type ParentProps= {
  //...
  item: ReactElement<ItemProps>;
};

export const Parent = ({ /* ... */, item }: ParentProps) => {
  return (
    <>
      {item}
    </>
  );
};

---

我想要達到的目標：

export const Main = () => {
  return (
    <Parent item={ <Item /> } />
  );
};

如您所見，我試圖將Item組件作為 prop 傳遞給Parent組件。 截至目前，這是可行的，但似乎使用 ReactElement 將類型放松為ReactElement<ItemProps, string | JSXElementConstructor<any>> ReactElement<ItemProps, string | JSXElementConstructor<any>> ，或更一般地說：

ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> 。

問題：如果我要替換任何其他組件，則不會有任何關於組件不同的明確警告或錯誤。 我試圖縮小它的范圍，以便只有<Item />組件可以傳遞給<Parent />的item={}道具。

本質上，有哪些方法可以顯式地將特定的 React 組件定義為父 React 組件的 prop？

Answer 1

因為 Component 返回JSX.Element ，而JSX.Element是從ReactElement擴展而來的。

interface Element extends React.ReactElement<any, any> { }

而且我認為如果你想斷言從父組件接收的組件，你可以像這樣接收完整的組件