我不知道如何使用 Typescript 为我的组件设置默认属性值。
这是源代码:
class PageState { } export class PageProps { foo: string = "bar"; } export class PageComponent extends React.Component<PageProps, PageState> { public render(): JSX.Element { return ( <span>Hello, world</span> ); } }
当我尝试使用这样的组件时:
ReactDOM.render(<PageComponent />, document.getElementById("page"));
我收到一条错误消息,提示foo缺少属性。我想使用默认值。我也尝试static defaultProps = ...在组件内部使用,但我怀疑它没有效果。
foo
static defaultProps = ...
src/typescript/main.tsx(8,17): error TS2324: Property 'foo' is missing in type 'IntrinsicAttributes & IntrinsicClassAttributes<PageComponent> & PageProps & { children?: ReactEle...'.
如何使用默认属性值?我公司使用的许多 JS 组件都依赖于它们,不使用它们不是一种选择。
使用static defaultProps是正确的。您还应该为道具和状态使用接口,而不是类。
static defaultProps
2018/12/1 更新 :TypeScript 改进了与defaultProps时间相关的类型检查。继续阅读最新和最有用的用法,直至旧用法和问题。
defaultProps
TypeScript 特别添加了defaultProps对使类型检查按您期望的方式工作的支持。例子:
interface PageProps { foo: string; bar: string; } export class PageComponent extends React.Component<PageProps, {}> { public static defaultProps = { foo: "default" }; public render(): JSX.Element { return ( <span>Hello, { this.props.foo.toUpperCase() }</span> ); } }
可以在不传递foo属性的情况下渲染和编译:
<PageComponent bar={ "hello" } />
注意:
foo?: string
undefined
defaultProps: Pick<PageProps, "foo">
PageProps
@types/react
16.4.11
在 TypeScript 3.0 实现编译器支持之前,defaultProps你仍然可以使用它,并且它在运行时与 React 100% 工作,但由于 TypeScript 在检查 JSX 属性时只考虑道具,你必须将具有默认值的道具标记为可选?。例子:
?
interface PageProps { foo?: string; bar: number; } export class PageComponent extends React.Component<PageProps, {}> { public static defaultProps: Partial<PageProps> = { foo: "default" }; public render(): JSX.Element { return ( <span>Hello, world</span> ); } }
Partial<>
strictNullChecks
this.props.foo
possibly undefined
this.props.foo!
if (this.props.foo) ...
这工作相同,但你没有Partial类型,所以只需省略Partial<>并为所有必需的道具提供默认值(即使这些默认值永远不会被使用)或完全省略显式类型注释。
Partial
props.html#functional-and-class- components)的默认道具
您也可以defaultProps在函数组件上使用,但您必须将函数键入FunctionComponent(StatelessComponent在@types/react之前的版本中16.7.2)接口,以便 TypeScript 知道defaultProps函数:
FunctionComponent
StatelessComponent
16.7.2
interface PageProps { foo?: string; bar: number; } const PageComponent: FunctionComponent<PageProps> = (props) => { return ( <span>Hello, {props.foo}, {props.bar}</span> ); }; PageComponent.defaultProps = { foo: "default" };
请注意,您不必在Partial<PageProps>任何地方使用,因为FunctionComponent.defaultProps已在 TS 2.1+ 中指定为部分。
Partial<PageProps>
FunctionComponent.defaultProps
另一个不错的选择(这是我使用的)是解构您的props参数并直接分配默认值:
props
const PageComponent: FunctionComponent<PageProps> = ({foo = "default", bar}) => { return ( <span>Hello, {foo}, {bar}</span> ); };
那你根本不需要defaultProps!请注意,如果您 确实 在函数组件上提供defaultProps,它将优先于默认参数值,因为 React 将始终显式传递defaultProps值(因此参数永远不会未定义,因此永远不会使用默认参数。)所以你会使用一个或另一个,而不是两者。