带类组件的默认道具
使用static defaultProps
是正确的。您还应该使用接口(而不是类)作为道具和状态。
更新2018/12/1:TypeScript defaultProps
随着时间的推移改进了与类型相关的类型检查。继续阅读以获取最新和最佳用法,直至较旧的用法和问题。
对于TypeScript 3.0及更高版本
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
在没有标记为可选(即foo?: string
),即使它不是必需的JSX属性。标记为可选意味着它可以是undefined
,但是实际上永远不会,undefined
因为defaultProps
它提供了默认值。可以将其视为类似于如何将函数参数标记为可选,或将其标记为默认值,但不能同时标记为两个,但这两者都意味着调用不需要指定value。TypeScript 3.0+的处理defaultProps
方式相似,这对React用户来说真的很酷!
- 在
defaultProps
没有明确的类型注释。推断出它的类型,并由编译器使用它来确定需要哪些JSX属性。您可以使用defaultProps: Pick<PageProps, "foo">
确保defaultProps
匹配的子集PageProps
。有关此警告的更多信息,请在此处说明。
- 这需要
@types/react
版本16.4.11
才能正常工作。
对于TypeScript 2.1直到3.0
在TypeScript 3.0实现编译器支持之前,defaultProps
您仍然可以使用它,并且它在运行时可与React一起使用100%,但是由于TypeScript仅在检查JSX属性时才考虑使用props,因此您必须使用标记默认的props ?
。例:
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>
);
}
}
注意:
- 进行注释是一个好主意
defaultProps
,Partial<>
以便它对您的道具进行类型检查,但是您不必为每个必需的属性提供默认值,这是没有意义的,因为必需的属性永远不需要默认值。
- 使用will
strictNullChecks
的值时,this.props.foo
将possibly undefined
需要一个非null的断言(即this.props.foo!
)或类型保护(即if (this.props.foo) ...
)来删除undefined
。这很烦人,因为默认的prop值意味着它实际上永远不会被定义,但是TS不能理解这一流程。这是TS 3.0添加对的显式支持的主要原因之一defaultProps
。
在TypeScript 2.1之前
这样做的原理相同,但是您没有Partial
类型,因此只需忽略Partial<>
并为所有必需的prop提供默认值(即使永远不会使用这些默认值),也可以完全忽略显式类型注释。
您也可以defaultProps
在函数组件上使用,但是必须在FunctionComponent
(StatelessComponent
在@types/react
版本之前16.7.2
)接口中键入函数,以便TypeScript知道defaultProps
函数:
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+中已经将其指定为部分。
另一个不错的替代方法(这是我使用的方法)是对props
参数进行解构并直接分配默认值:
const PageComponent: FunctionComponent<PageProps> = ({foo = "default", bar}) => {
return (
<span>Hello, {foo}, {bar}</span>
);
};
然后,您根本不需要defaultProps
!请注意,如果确实defaultProps
在函数组件上提供,它将优先于默认参数值,因为React始终会显式传递defaultProps
值(因此,永远不会未定义参数,因此永远不会使用默认参数。)因此,请使用一个或另一个,而不是两者兼而有之。
static defaultProps
是正确的。您可以发布该代码吗?