reactjs - 没有 Props 的 TypeScript React 状态
问题描述
我想利用 TypeScript 中的静态和强类型,但仅限于状态,因为我不打算接受任何道具。
当我尝试这样传递接口时,我最终得到一个错误:
import * as React from 'react';
import {Link} from 'react-router-dom';
import Constants from '../Constants';
interface ILoginState {
email: string;
password: string;
remember: boolean;
error: string;
isLoading: boolean;
}
class LoginView extends React.Component<{}, ILoginState> {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
remember: false,
error: '',
isLoading: false
};
}
render() {
return (<div>Login goes here</div>
);
}
}
export default LoginView;
我最终得到一个编译错误:
ERROR in [at-loader] ./src/scripts/pages/LoginView.tsx:41:21
TS2345: Argument of type '{ [x: number]: any; }' is not assignable to parameter of type 'ILoginState | ((prevState: Readonly<ILoginState>, props: {}) => ILoginState | Pick<ILoginState, "...'.
Type '{ [x: number]: any; }' is not assignable to type 'Pick<ILoginState, "email" | "password" | "remember" | "error" | "isLoading">'.
Property 'email' is missing in type '{ [x: number]: any; }'.
我也试过用'any'代替空括号,但这也不起作用。
这是跟踪所指的第 41 行 (this.SetState...):
handleChange = event => {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
this.setState({
[target.name]: value
});
}
以下是使用它的所有示例:
<input name="email" type="email" value={this.state.email} onChange={this.handleChange} />
<input name="password" type="password" value={this.state.password} onChange={this.handleChange} />
<input name="remember" type="checkbox" checked={this.state.remember} onChange={this.handleChange} />
解决方案
选项1
class LoginView extends React.Component<{}, ILoginState> {
constructor({}) {
}
}
选项 2
class LoginView extends React.Component<null, ILoginState> {
constructor(null) {
}
}
由于 props 默认值为空对象,我个人更喜欢选项 1。
编辑:似乎最新的打字稿版本不支持选项 1。我将建议以下方法之一(在 TS 3.7 上测试):
class LoginView extends React.Component<{}, ILoginState> {
constructor() {
super({});
}
}
// OR
class LoginView extends React.Component<{}, ILoginState> {
constructor(props = {}) {
super(props);
}
}
感谢@Andy 让我注意到了这个更新。
推荐阅读
- node.js - 让 Node-gyp 在 Windows 10 上运行
- java - 当元素已经聚焦并等待输入时,如何使用Sendkeys()而不在网页上找到元素
- c# - 当特定子表单处于活动状态时,如何限制访问其他子表单?
- java - 在forEach循环java 8中更改变量的值
- android - 如何在 glsurfaceview 和 cameraview 上修复 3D 对象并从不同角度旋转它?
- java - Android P ,下载不开始使用下载管理器?
- php - Laravel Eloquent ID 作为数组键
- android - 解析存储在 ionic 3 中的常量中的 JSON 字符串
- java - JavaFX - 加载下一个场景时保留工具栏
- c++ - 如何将 C 类型“char *”存储到 C++ 向量中?