reactjs - proptypes - react/forbid-prop-types

Extraer/leer React propTypes

Question

Quiero probar visualmente los componentes de React. El usuario puede modificar los accesorios del componente usando un formulario. Me gustaría poder (por ejemplo) representar <select> función de React.PropTypes.oneOf([''green'', ''blue'', ''yellow'']) .

Cuando leo MyComponent.propTypes devuelve una función definida por Reaccionar. ¿Hay alguna manera de extraer / leer los tipos de props?

Answer 1

Tal vez agregue un ejemplo de código de lo que está tratando de hacer, ya que no lo entiendo del todo, pero ¿por qué está accediendo a propTypes? Los PropTypes no contienen valores sino más bien expectativas de cuáles deben ser los tipos de valores para los diferentes accesorios que se pasan al componente.

Si tiene un formulario que le permite alterar los puntales, supongo que está pasando el puntal al componente que representará el componente seleccionado. Puede acceder a estos apoyos a través del objeto de utilería.

Si intenta validar los propTypes que pueden tener la forma de diferentes tipos, se puede usar lo siguiente:

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

Answer 2

No puede leer directamente de propTypes ya que, como dijo, se definen como funciones.

En su lugar, podría definir sus propTypes en un formato intermedio, desde el cual generaría sus propTypes estáticos.

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,
  },
});

A continuación, puede acceder a su formato personalizado propTypes a través de MyComponent.myPropTypes o element.type.myPropTypes .

Aquí hay un ayudante para hacer que este proceso sea un poco más fácil.

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

applyPropTypes(myPropTypes, MyComponent);