在 Nextjs 中扩展 React.FC 的默认行为

所以我有一个在 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>

</Head>

<div>

<p>Hello </p>

</div>

);

};

Home.headerTitle = "Search";

我的界面

export interface HeaderTitle extends React.FunctionComponent {

headerTitle: string;

}

我想向我的功能组件添加一个方法。

慕斯王

浏览 121回答 1

1回答

人到中年有点甜

尝试单独声明您的接口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

随时随地看视频慕课网APP