用TypeScript开发React项目,在父子组件间传值时发生错误提示
class Page extends React.Component
{
render()
{
return <div>
<NavigationBar title="标题"/>
</div>
}
}
class NavigationBar extends React.Component
{
render()
{
return <div>
"返回标题"
</div>
}
}
错误提示
No overload matches this call.
Overload 1 of 2, '(props: Readonly<{}>): NavigationBar', gave the following error.
Type '{ title: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NavigationBar> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
Property 'title' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<NavigationBar> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
Overload 2 of 2, '(props: {}, context?: any): NavigationBar', gave the following error.
Type '{ title: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NavigationBar> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
Property 'title' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<NavigationBar> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'. TS2769
原因是Typescript是强类型语言,如果要给组件传值,需要在接受值组的地方声明值类型,就本例而言,需要明确定义props
,本例为NavigationBarProps
class Page extends React.Component
{
render()
{
return <div>
<NavigationBar title="标题"/>
</div>
}
}
// 定义props类型
interface NavigationBarProps
{
title:string;
}
class NavigationBar extends React.Component<NavigationBarProps>
{
render()
{
return <div>
"返回标题"
</div>
}
}