Как установить PropType магазина mobx?

Я использую здесь: React, ESLint, Mobx < / сильный>.

Я не уверен, как правильно установить PropType магазина mobx, который я передаю поставщику.

ESLint дает мне эту ошибку:

Магазин [eslint] отсутствует при проверке свойств (типы реакции / свойства)

Я прохожу магазин через Provider вот так:

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

в App компоненте я использую одно из значений store, это мой mobx store:

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 mobx eslint react-proptypes
person ueeieiie    schedule 09.01.2018    source источник

Ответы (2)


arrow_upward
4
arrow_downward

У вас небольшая опечатка. Это 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>
        );
    }
}
person Tholle    schedule 09.01.2018
comment
Это действительно была опечатка, спасибо, но я получаю такую ​​ошибку: 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 - person ueeieiie; 10.01.2018
comment
Вторая ошибка, с которой я столкнулся, была вызвана тем, что @inject украшает компонент, а также обертывает компонент компонентом с именем wrappedComponent, поэтому при обращении внутри propTypes он должен быть таким : App.wrappedComponent.propTypes = {...}. - person ueeieiie; 10.01.2018

arrow_upward
1
arrow_downward

store: PropTypes.object.isRequired или store: PropTypes.object должны сделать это.

В случае, если у вас есть правило Тип пропуска any запрещен: eslint (реагировать / запрещать-проп-типы) store: PropTypes.any (обязательно или нет) будет работать.

person David Casanellas    schedule 25.11.2019