Извлечь/прочитать React propTypes

Я хочу визуально протестировать компоненты React. Пользователь может изменить реквизит компонентов с помощью формы. Я хотел бы иметь возможность (например) визуализировать <select> на основе React.PropTypes.oneOf(['green', 'blue', 'yellow']).

Когда я читаю MyComponent.propTypes, он возвращает функцию, определенную React. Есть ли способ извлечь/прочитать типы prop?

ОТВЕТЫ

Ответ 1

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

Вместо этого вы можете определить свои propTypes в промежуточном формате, из которого вы создадите статический propTypes.

var myPropTypes = {
  color: {
    type: 'oneOf',
    value: ['green', 'blue', 'yellow'],
  },
};

function processPropTypes(propTypes) {
  var output = {};
  for (var key in propTypes) {
    if (propTypes.hasOwnProperty(key)) {
      // Note that this does not support nested propTypes validation
      // (arrayOf, objectOf, oneOfType and shape)
      // You'd have to create special cases for those
      output[key] = React.PropTypes[propTypes[key].type](propTypes[key].value);
    }
  }
  return output;
}

var MyComponent = React.createClass({
  propTypes: processPropTypes(myPropTypes),

  static: {
    myPropTypes: myPropTypes,
  },
});

Затем вы можете получить доступ к своему пользовательскому формату propTypes через MyComponent.myPropTypes или element.type.myPropTypes.

Здесь помощник, чтобы сделать этот процесс немного легче.

function applyPropTypes(myPropTypes, Component) {
  Component.propTypes = processPropTypes(myPropTypes);
  Component.myPropTypes = propTypes;
}

applyPropTypes(myPropTypes, MyComponent);

Ответ 2

Может быть, добавить пример кода того, что вы пытаетесь сделать, поскольку я не совсем понимаю, но почему вы обращаетесь к propTypes? PropTypes не содержат значений, а скорее ожиданий от того, какими должны быть ваши типы значений для разных реквизитов, передаваемых в компонент.

Если у вас есть форма, позволяющая изменять реквизиты, я предполагаю, что вы передаете опору в компонент, который будет отображать компонент select. Вы можете получить доступ к этим реквизитам через объект реквизита.

Если вы пытаетесь проверить propTypes, которые могут иметь форму разных типов, можно использовать следующее:

optionalUnion: React.PropTypes.oneOfType([
  React.PropTypes.string,
  React.PropTypes.number,
  React.PropTypes.instanceOf(Message)
])