reactjs - 输入“需要”' 不可分配给类型 'Validator<"horizontal" | “垂直” | 未定义>'
问题描述
代码
import * as React from 'react';
import * as PropTypes from 'prop-types';
interface ILayoutProps {
dir?: 'horizontal' | 'vertical'
};
const Layout: React.FunctionComponent<ILayoutProps> = (props) => {
return (
<div>
{props.children}
</div>
);
};
Layout.defaultProps = {
dir: 'horizontal'
};
Layout.propTypes = {
dir: PropTypes.oneOf(['horizontal', 'vertical'])
};
export default Layout;
错误信息
TS2322: Type '{ dir: Requireable<string>; }' is not assignable to type 'ValidationMap<ILayoutProps>'.
Types of property 'dir' are incompatible.
Type 'Requireable<string>' is not assignable to type 'Validator<"horizontal" | "vertical" | undefined>'.
我应该如何定义 Layout.propTypes?
解决方案
创建一个新类型并引用它。
import * as React from 'react';
import * as PropTypes from 'prop-types';
type Direction = 'horizontal' | 'vertical'
interface ILayoutProps {
dir?: Direction;
};
const Layout: React.FunctionComponent<ILayoutProps> = (props) => {
return (
<div>
{props.children}
</div>
);
};
Layout.defaultProps = {
dir: 'horizontal',
};
Layout.propTypes = {
dir: PropTypes.oneOf<Direction>(['horizontal', 'vertical']),
};
export default Layout;
我喜欢强类型的方式。你也可以考虑这个代码。
import * as React from 'react';
import * as PropTypes from 'prop-types';
export enum Direction {
Horizontal = 'horizontal',
Vertical = 'vertical',
}
interface ILayoutProps {
dir?: Direction;
};
const Layout: React.FunctionComponent<ILayoutProps> = (props) => {
return (
<div>
{props.children}
</div>
);
};
Layout.defaultProps = {
dir: Direction.Horizontal,
};
Layout.propTypes = {
dir: PropTypes.oneOf<Direction>([
Direction.Horizontal,
Direction.Vertical,
]),
};
export default Layout;
用法:
import Layout, { Direction } from './Layout';
// ...
<Layout dir={Direction.Horizontal}></Layout>
推荐阅读
- email - 将 ansible 作业输出作为电子邮件发送
- php - 致命错误:未捕获的 ReflectionException:类配置不存在
- apache-kafka - 如何使用来自服务器的带有偏移值的 kafka 消息?
- python-3.x - 尝试连接到 vTiger 时凭据无效
- python - 如何在 Python 中使用带有 Pycharm 的调试器进行单元测试?
- javascript - 可以重写这个 Javascript 来为类而不是 id 工作吗?
- reactjs - redux - 在“脏”状态下处理组件外的动作调用的最佳方法?
- c# - 如何从 System.Object 对象中删除子对象?
- android - 获取随机android.database.sqlite.SQLiteBlobTooBigException
- elasticsearch - kuromoji 中的部分搜索查询