javascript - Typescript React 泛型函数类型
问题描述
我有一个案例:
interface State {
Mark: boolean;
Jane: boolean;
}
React.Component<{}, State> {
state = {
Mark: false,
Jane: false,
};
fn = (name: string) => () => {
this.setState({ [name]: true });
^^^^^^^^^^
}
render () {
return
['Mark', 'Jane'].map((name) => <div onClick={this.fn(name)}>{name}</div>);
}
我收到错误:
Argument of type '{ [x: string]: boolean; }' is not assignable
to parameter of type 'State | Pick<State, "Mark" | "Jane">
我可以为它做两个单独的功能,但我想保持它的通用性。我怎样才能使它通用,以便错误消失?
解决方案
事实证明,这是 ts 编译器本身的限制。检查此问题以获取更多信息:https ://github.com/DefinitelyTyped/DefinitelyTyped/issues/26635
现在要解决您的问题,您可以使用setState
回调版本。像下面这样:
interface State {
Mark: boolean;
Jane: boolean;
}
type StateKeys = keyof State
class Test extends React.Component <{}, State > {
state = {
Mark: false,
Jane: false,
};
fn = (name: StateKeys) => () => {
this.setState(prev => ({ ...prev, [name]: true }));
}
render() {
return ['Mark', 'Jane'].map((name: StateKeys) => <div onClick={this.fn(name)}>{name}</div>);
}
}
推荐阅读
- javascript - 系统蜂鸣 NodeJS 自定义频率和持续时间
- typescript - 如何在 vue 组件中实现 typescript 代码?
- gojs - GoJS Html 上下文菜单 - 获取 SelectedNode
- list - Prolog 使用追加查找列表的最后一个元素
- c++ - V8:尝试每秒调用 60 次函数时性能不佳
- php - CSS3的背景颜色?ACF / 高级自定义字段
- html - 如何使用 TypeScript 克隆包含 Angular 选择器的节点?
- nestjs - 无法从 mongoose 对象中去除 _id
- c# - 范围 Neo4j 驱动程序和会话对象
- c# - 如何在 Update 方法中修改 Start 方法变量:Unity