typscript组件类型参数

Question

我有以下代码

const pageArea = (Component,title) => ({ ...props }) => {
<Component {...props} />
}

这在js中工作得很好，但我想把它改成typescript

我试过了

function ErrorFallback({error, resetErrorBoundary}) {
return (
<div role="alert">
<p>Something went wrong:</p>
<pre>{error.message}</pre>
<button onClick={resetErrorBoundary}>Try again</button>
</div>
)
}

const pageArea = (Component:ReactNode,title:String) => ({ ...props }) => {
return (
<>
{/* <Header pTitle= {title} /> */}
<div>
<ErrorBoundary FallbackComponent={ErrorFallback}>
{Component ? <Component {...props} /> : null}
</ErrorBoundary>
</div>
</>
);
};

但是它不工作…typescript说任何类型的错误

有人能帮我转换到typescript，我也发现很难理解这个箭头函数语法…如果有人能建议任何链接来理解这将是伟大的…

感谢

Answer 1

有很多选择，例如，您可以在组件外部定义类型，然后将其传递给组件:

首先，您需要从react库

导入适当的类型

import React, {FunctionComponent, ReactNode} from 'react';

现在，你可以用interface来定义你的类型，它来自于TypeScript:

interface PageAreaProps {
children: ReactNode;
title: string;
}

最后，将该接口应用到您的组件中:

const PageArea: FunctionComponent<PageAreaProps> = ({children, title}) => { // rest of the codes} 

注意:始终使用uppercase作为组件名称的第一个字母。

Answer 2

import { FunctionComponent } from "react";
interface Props {
title: string
}
const pageArea = (Component: FunctionComponent<Props>, title: string) => () => {
return <Component title={title} />
}
function Test ({ title }: Props) {
return <h1>{title}</h1>
}
export default function App() {
return (
<div className="App">
{pageArea(Test, 'some')()}
</div>
);
}