• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

如何解决Typescript对ReactHooks中使用mobx时props的类型检查

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

最外层组件传入 mobx 中的 stores:

import { stores } from "@/stores";
import { Provider } from "mobx-react";
ReactDOM.render(
  <Provider {...stores}>
    <App />
  </Provider>,
  document.getElementById("app") as HTMLElement
);

中间组件 App:

import React from "react";
import "./app.scss";
import Cards from "@/floors/Cards";
const App = () => {
  return (
    <div className="welcome-container">
      <Cards />
    </div>
  );
};
export default App;

子组件:如何定义 store 的类型,由于 store 相当于 props 传入的,如果定义了 props 类型,则父组件''就会报错,因为没有传入 TS 规定的 store 类型;

interface IWelcomeProps {
  appStore: GlobalStores["appStore"];
  myPlusStore: GlobalStores["myPlusStore"];
}

const Cards: React.FC<IWelcomeProps> = (props: IWelcomeProps) => {
  const { appStore, myPlusStore } = props;
};
export default inject("appStore", "myPlusStore")(observer(Cards));

解决方法:
一:父组件 Cards 有自己的 props 时:
让 store 定义的 TS 类型 IWelcomeProps 继承于 MyComponentProps,这样 IWelcomeProps 有了所有的 props 类型,
但是子组件传入的类型是不包含 props 的 MyComponentProps 类型;
然后在组件内部让 props 在断言成 IWelcomeProps
这样传入的 props 只是父组件真正的 props 类型;而内部组件的 props 被断言成包含了 store 和父组件 props 的类型

interface MyComponentProps {
  name?: string;
}

interface IWelcomeProps extends MyComponentProps {
  appStore: GlobalStores["appStore"];
  myPlusStore: GlobalStores["myPlusStore"];
}

const Cards: React.FC<MyComponentProps> = (props: MyComponentProps) => {
  const _props = props as IWelcomeProps;
  const { appStore, myPlusStore } = _props;
};
export default inject("appStore", "myPlusStore")(observer(Cards));

二:父组件没有 props 的时候

定义了 store 类型 IWelcomeProps,在传入 props 的时候使用 Partial<>,将其改为可选属性,然后在子组件中使用断言再将其改为真正的 store 属性,骗过 ts 检查

import React, { useState, useEffect } from "react";
import { inject, observer } from "mobx-react";
import { GlobalStores } from "@/stores";

interface IWelcomeProps {
  appStore: GlobalStores["appStore"];
  myPlusStore: GlobalStores["myPlusStore"];
}

const Cards = (props: Partial<IWelcomeProps>) => {
  const _props = props as IWelcomeProps;
  const { appStore, myPlusStore } = _props;
  const [currList, setCurrList] = useState("he");

  return (
    <div className="welcome-container">
      <p>我的初始名字是:{appStore.initName}</p>
    </div>
  );
};
export default inject("appStore", "myPlusStore")(observer(Cards));

参考文章:https://zhuanlan.zhihu.com/p/33406998


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap