javascript - 如何设置 mobx 商店的 PropType?

标签 javascript eslint mobx react-proptypes

我在这里使用:ReactESLintMobx.

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

ESLint 给我这个错误:

[eslint] store is missing in props validation (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?
};

最佳答案

你有一个小错字。它是 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>
        );
    }
}

关于javascript - 如何设置 mobx 商店的 PropType?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48171581/

相关文章:

javascript - 如何在一个窗口中为不同页面设置一次变量

javascript 和 HTML 成本计算器 - 地毯的值(value) x 房间的大小

JavaScript 输出到文件

vue.js - 使用 Prettier 在 Vue 模板中保留垂直空白

javascript - ESLint : Fast way to solve "Irregular whitespace not allowed"

react-native - 行未在 MobX 存储的 React Native ListView 中呈现

reactjs - Mobx-state-tree 在树内使用 mobx react - 好的还是坏的做法?

javascript - 有什么方法可以重命名 Facebook "Send"按钮吗?

javascript - 在构建阶段检查对象属性的存在

javascript - 当可观察到的变化时,mobx 观察者突然不重新渲染