我制作了如下所示的 mobx 商店。
我在 store.js 中声明了操作类型
import { action, observable } from 'mobx';
export class SignStore {
@observable
UserInformation: {
email: '';
password: '';
};
@action
handleChange = (e: any): void => {
this.UserInformation[e.target.id] = e.target.value;
};
}
我将此商店注入(inject)到组件中。
我在这里声明了 UserInformation 的类型。
但是 'const { SignStore } = this.props;'在这里,
SignStore 说
Property 'SignStore' does not exist on type 'Readonly & Readonly<{ children?: ReactNode; }>'.
import * as React from 'react';
import { observer, inject } from 'mobx-react';
interface IUserInformation {
email: string;
password: string;
}
@inject('SignStore')
@observer
class SignUp extends React.Component<IUserInformation> {
render() {
const { SignStore } = this.props;
return (
<div className="container">
<form className="white" onSubmit={}>
<h5 className="grey-text text-darken-3">Sign Up</h5>
<div className="input-field">
<label htmlFor="email">Email</label>
<input type="email" id="email" onChange={SignStore.handleChange} />
</div>
<div className="input-field">
<label htmlFor="password">Password</label>
<input
type="password"
id="password"
onChange={SignStore.handleChange}
/>
</div>
</form>
</div>
);
}
}
export default SignUp;
对于这种情况,您能提出一些建议吗?
最佳答案
除了其他问题之外,主要问题是 this.props
类型为IUserInformation
这是 { email: string; password: string; }
然后你尝试用 const { SignStore } = this.props;
来解构它显然props
没有 SignStore
范围。为此, Prop 需要如下所示:{ email: string; password: string; SignStore: any }
.
我对 mobx 不太熟悉,但似乎你至少需要一个 ISignStore 接口(interface):
interface ISignStore {
UserInformation: IUserInformation;
handleChange: (e: any) => void;
}
然后将其用于您的组件:
class SignUp extends React.Component<ISignStore>
并像这样使用它:
const SignStore = this.props;
关于reactjs - 如何在 ReactJS 中使用 mobx 组织 typescript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55323149/