如何为MobX Store设置正确的PropType？

你遇到的ESLint报错store is missing in props validation，主要有两个原因：一是你的App组件里propTypes的拼写错误，二是接收store的TestComponent没有定义对应的props类型验证。下面一步步给你解决：

第一步：修正App组件的propTypes拼写错误 #

你现在写的是App.propType = {...}，少了个s，正确的应该是propTypes（复数），而且可以用PropTypes.instanceOf来指定store的类型，这样比any更精准：

// App组件里修正后的propTypes
import { Store } from './path-to-your-store-file'; // 记得导入Store类

App.propTypes = {
  store: PropTypes.instanceOf(Store)
};

第二步：给TestComponent添加props类型验证 #

真正触发ESLint错误的是你把this.props.store传给TestComponent时，这个组件没有对store这个props做类型定义。你有两种方式来定义：

方式一：用instanceOf（推荐，因为你的store是类实例） #

直接指定store是Store类的实例，需要在TestComponent里导入Store类：

// TestComponent.js
import React from 'react';
import PropTypes from 'prop-types';
import { Store } from './path-to-your-store-file';

const TestComponent = ({ store }) => {
  return (
    <div>{store.x}</div>
  );
};

TestComponent.propTypes = {
  store: PropTypes.instanceOf(Store).isRequired // 标记为必填
};

export default TestComponent;

方式二：用shape定义结构（适合不需要依赖类的场景） #

如果不想依赖Store类的导入，可以直接定义store的属性结构：

// TestComponent.js的propTypes部分
TestComponent.propTypes = {
  store: PropTypes.shape({
    x: PropTypes.string.isRequired // 对应Store里的@observable x
  }).isRequired
};

这样修改后，ESLint的react/prop-types错误就会消失，同时也让你的组件props类型更明确，代码更健壮。

内容的提问来源于stack exchange，提问作者ueeieiie