最外层组件传入 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
|
请发表评论