Передача значений PropTypes через реквизиты дочернему компоненту React с сохранением состояния

Question

Я установил свой PropTypes для компонента App для всех реквизитов, передаваемых дочерним элементам.

class App extends Component {
    constructor( props ) {
        super( props );

        this.state = {
            anyProps : undefined',
        };
    }

    propsValues = {
        anyProp: [ 'undefined', 'neutral', 'evil', 'good' ],
    };

   (...)

Я могу получать PropTypes для дочерних компонентов без сохранения состояния и использовать его значение для проверки других реквизитов, например:

const SFComponent = ({
    anyProp,
    propsValues,
}) => {

    SFComponent.propTypes = {
        anyProp : PropTypes.oneOf( propsValues.anyProp ).isRequired,
        propsValues : PropTypes.objectOf( PropTypes.arrayOf( PropTypes.string )),
    }; 

    (...)

Но когда я пытаюсь сделать то же самое с дочерним компонентом с состоянием, он просто не работает.Я не могу использовать тот же синтаксис, и реквизиты все еще не получены при проверке типов.

class StatefulComponent extends React.Component {

    constructor( props ) {
        super( props );
        this.state = {
            anyAttribute : true,
            anotherAttribute : null,
        };
    }

    static propTypes = {
        anyProp : PropTypes.oneOf( this.props.propsValues.anyProp ).isRequired,
        propsValues : PropTypes.objectOf( PropTypes.arrayOf( PropTypes.string )),

    (...)

Приведенный выше фрагмент кода выдает ошибку о том, что этот не определен.Я также пробовал другие возможности, но ни одна из них не работает.

Итак, любые идеи о том, как я могу достичь того же результата, который достигаю в компонентах без сохранения состояния, позволяют использовать props.propsValues в качестве базового средства проверки для всех моихреквизит на дочерних компонентов с состоянием?Спасибо!

Answer 1

this.props не существует в момент использования propTypes, поскольку propTypes является статическим.

SFComponent - это хак, который не будет работать должным образом, поскольку SFComponent.propTypes влияет только на следующий компонент рендеринга.Это должно быть сделано с помощью HOC:

const withAnyProp = Comp => ({ anyProp, ...props }) =>
  const Wrapper = (...props) => <Comp ...props/>;
  Wrapper.propTypes = {
    anyProp : PropTypes.oneOf(anyProp).isRequired,
  };
  return <Wrapper ...props>;
};
const SFComponentWithAnyProp = withAnyProp(SFComponent);

Типы Orop являются просто встроенной заменой для статических проверок типов.Вместо них лучше использовать типы TypeScript или Flow.

В случае, если необходимо использовать динамические проверки типа , реквизиты можно напрямую устанавливать в методах тела функционального компонента или метода подключения компонента класса.