Reactjs 如何使用typescript、react和mobx声明mobx道具类型

我有一个功能根组件，如下所示

const RootPage: React.FC = () => {
    const classes = useStyles();

    return (
        <React.Fragment>
            <Sidebar/>
            <Grid container className={classes.fullHeight}>
                <Map/>
            </Grid>
        </React.Fragment>
    )
};

interface IMapProps {
    map:MapStore;
}

const Map : React.FC<IMapProps> = (props)=>{
    return (
        <div>
            {props.map}
        </div>
    )
};

export default (inject('map'))(observer(Map));

react_front_1    | Property 'map' is missing in type '{}' but required in type 'IMapProps'.  TS2741
react_front_1    | 
react_front_1    |     22 |             <Sidebar/>
react_front_1    |     23 |             <Grid container className={classes.fullHeight}>
react_front_1    |   > 24 |                 <Map/>
react_front_1    |        |                  ^
react_front_1    |     25 |             </Grid>
react_front_1    |     26 |         </React.Fragment>
react_front_1    |     27 |     )

constrootpage:React.FC=（）=>{
const classes=useStyles（）；
返回(
)
};

我的地图组件如下所示

const RootPage: React.FC = () => {
    const classes = useStyles();

    return (
        <React.Fragment>
            <Sidebar/>
            <Grid container className={classes.fullHeight}>
                <Map/>
            </Grid>
        </React.Fragment>
    )
};

interface IMapProps {
    map:MapStore;
}

const Map : React.FC<IMapProps> = (props)=>{
    return (
        <div>
            {props.map}
        </div>
    )
};

export default (inject('map'))(observer(Map));

react_front_1    | Property 'map' is missing in type '{}' but required in type 'IMapProps'.  TS2741
react_front_1    | 
react_front_1    |     22 |             <Sidebar/>
react_front_1    |     23 |             <Grid container className={classes.fullHeight}>
react_front_1    |   > 24 |                 <Map/>
react_front_1    |        |                  ^
react_front_1    |     25 |             </Grid>
react_front_1    |     26 |         </React.Fragment>
react_front_1    |     27 |     )

接口IMapProps{
地图：地图商店；
}
常量映射：React.FC=（道具）=>{
返回(
{props.map}
)
};
导出默认值（注入（'map'））（观察者（map））；

我期望IMapProps显然来自mobx注入；然而，typescript抛出了一个错误，它说我应该在根组件中提供道具。错误如下所示

const RootPage: React.FC = () => {
    const classes = useStyles();

    return (
        <React.Fragment>
            <Sidebar/>
            <Grid container className={classes.fullHeight}>
                <Map/>
            </Grid>
        </React.Fragment>
    )
};

interface IMapProps {
    map:MapStore;
}

const Map : React.FC<IMapProps> = (props)=>{
    return (
        <div>
            {props.map}
        </div>
    )
};

export default (inject('map'))(observer(Map));

react_front_1    | Property 'map' is missing in type '{}' but required in type 'IMapProps'.  TS2741
react_front_1    | 
react_front_1    |     22 |             <Sidebar/>
react_front_1    |     23 |             <Grid container className={classes.fullHeight}>
react_front_1    |   > 24 |                 <Map/>
react_front_1    |        |                  ^
react_front_1    |     25 |             </Grid>
react_front_1    |     26 |         </React.Fragment>
react_front_1    |     27 |     )

react_front_1 |类型“{}”中缺少属性“map”，但类型“IMapProps”中需要属性“map”。TS2741
反应前1 |
正面反应1 | 22 |
正面反应1 | 23 |
正面反应| 1 |>24 |
正面反应^
正面反应1 | 25 |
正面反应1 | 26 |
反应（前1 | 27 |）

---

如何为来自mobx商店的道具提供类型？

您需要将它们标记为可选道具

interface IMapProps {
    map?: MapStore;
}

尽管之后可能需要使用非空断言，比如

props.map如果您的tsconfig设置为strict

现在更好的方法是使用
React.createContext
并创建自定义钩子来获取存储

这样，您甚至不需要描述道具界面，因为您的商店将来自此挂钩

更多信息请点击此处：