已解決430363個問題，去搜搜看，總會有你想問的

在 Nextjs 中擴展 React.FC 的默認行為

首頁猿問在 Nextjs 中擴展...

在 Nextjs 中擴展 React.FC 的默認行為

JavaScript

慕斯王 2022-12-29 10:28:24

所以我有一個在 Nextjs 中使用以下代碼的教程，我計劃將它從 javascript 轉移到 typescript。我是打字稿的新手，所以我已經嘗試了我看過的大部分文章，但擴展默認的 React.FC 似乎不起作用。function Explore() { return <p className="p-4">Explore</p>;}Explore.headerTitle = "Search";export default Explore;我的組件const Home: React.FunctionComponent = () => { return ( <div> <Head> <title>Home / Twitter</title> <link rel="icon" href="/favicon.ico" /> </Head> <div> <p>Hello </p> </div> </div> );};Home.headerTitle = "Search";我的界面export interface HeaderTitle extends React.FunctionComponent { headerTitle: string;}我想向我的功能組件添加一個方法。

查看完整描述

1 回答

人到中年有點甜

TA貢獻1895條經驗獲得超7個贊

嘗試單獨聲明您的接口React.FunctionComponent（為了可重用性）：

export interface WithHeaderTitle {
   static headerTitle?: string;
}

然后在您的組件代碼中，導入接口并像這樣使用它：

const Home: React.FunctionComponent & WithHeaderTitle = () => { ... }

這里的關鍵詞是“交叉點類型”。您可以在這里閱讀更多相關信息：https ://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#intersection-types

反對回復 2022-12-29

1 回答
0 關注
115 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 Nextjs 中擴展 React.FC 的默認行為

在 Nextjs 中擴展 React.FC 的默認行為

1 回答

添加回答