Question

我像下面这样建立了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;
  };
}

然后我将此商店注入了组件中。
我在这里声明了UserInformation的类型。
但是“ const {SignStore} = this.props;”在这里，
SignStore说

属性'SignStore'在类型'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;

在这种情况下，您能推荐一些建议吗？

Answer 1

除其他问题外，主要问题是this.props的类型为IUserInformation，{ email: string; password: string; }的类型是const { SignStore } = this.props;，显然是props没有SignStore参数。为此道具需要看起来像：{ email: string; password: string; SignStore: any }。

我对mobx并不是很熟悉，但是似乎您至少需要一个ISignStore接口：

interface ISignStore {
  UserInformation: IUserInformation;
  handleChange: (e: any) => void;
}

然后将其用于您的组件：

class SignUp extends React.Component<ISignStore>

并像这样使用它：

const SignStore = this.props;

如何在ReactJS上使用Mobx组织打字稿

1 个答案: