如何设置 mobx 商店的 PropType？答案

【问题标题】：How to set the PropType of a mobx store?如何设置 mobx 商店的 PropType？
【发布时间】：2018-01-09 15:31:56
【问题描述】：

我在这里使用：React、ESLint、Mobx em>。

我不确定如何正确设置我通过 Provider 传递的 mobx 商店的 PropType。

ESLint 给了我这个错误：

props 验证中缺少 [eslint] 存储（react/prop-types）

我通过Provider 像这样通过商店：

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    appLocation
);

在App 组件中，我使用了其中一个存储值，这是我的 mobx 商店：

import { observable } from 'mobx';

class Store{
    @observable x = 'Hello World!';
}

export const store= new Store();

这是我的应用组件：

// Dependencies
import React from 'react';
import { inject, observer } from 'mobx-react';
import PropTypes from 'prop-types';

// Components
import TestComponent from './TestComponent';

// App Component
@inject('store')
@observer
export default class App extends React.Component {
    render() {
        return (
            <div>
                <TestComponent store={this.props.store} />     // the Error above
            </div>
        );
    }
}

App.propType = {
    store: PropTypes.any    // What is the correct way to set this prop?
};

【问题讨论】：

标签： javascript eslint mobx react-proptypes

【解决方案1】：

你有一个小错字。是propTypes，不是propType：

@inject('store')
@observer
export default class App extends React.Component {
    static propTypes = {
        store: PropTypes.any
    };

    render() {
        return (
            <div>
                <TestComponent store={this.props.store} />
            </div>
        );
    }
}

【讨论】：

确实是一个错字，谢谢，但我收到了这个错误：Warning: Failed prop type: The prop 'store' is marked as required in inject-App-with-store, but its value is undefined. in inject-App-with-store
我遇到的第二个错误是因为@inject 装饰了组件并且还用名为wrappedComponent 的组件包装了组件，所以在propTypes内部寻址时>，必须是这样的：App.wrappedComponent.propTypes = {...}.

【解决方案2】：

store: PropTypes.object.isRequired 或 store: PropTypes.object 应该这样做。

如果你有规则 Prop 类型 any 是被禁止的：eslint(react/forbid-prop-types) store: PropTypes.any （无论是否需要）都会起作用。

【讨论】：