validation - validaciones - solo permite que los niños de un tipo específico reaccionen

required react

Question

Tengo un componente de Card y un componente de CardGroup , y me gustaría lanzar un error cuando CardGroup tiene hijos que no son componentes de la Card . ¿Es esto posible, o estoy tratando de resolver el problema equivocado?

Answer 1

Para React 0.14+ y el uso de clases ES6, la solución se verá así:

class CardGroup extends Component {
  render() {
    return (
      <div>{this.props.children}</div>
    )
  }
}
CardGroup.propTypes = {
  children: function (props, propName, componentName) {
    const prop = props[propName]

    let error = null
    React.Children.forEach(prop, function (child) {
      if (child.type !== Card) {
        error = new Error(''`'' + componentName + ''` children should be of type `Card`.'');
      }
    })
    return error
  }
}

Answer 2

Puede usar la displayName para cada niño, accediendo por tipo:

for (child in this.props.children){
  if (this.props.children[child].type.displayName != ''Card''){
    console.log("Warning CardGroup has children that aren''t Card components");
  }  
}

Answer 3

Hice un PropType personalizado para esto que llamo equalTo . Puedes usarlo así ...

class MyChildComponent extends React.Component { ... }

class MyParentComponent extends React.Component {
  static propTypes = {
    children: PropTypes.arrayOf(PropTypes.equalTo(MyChildComponent))
  }
}

Ahora, MyParentComponent solo acepta hijos que son MyChildComponent . Puede verificar elementos html como este ...

PropTypes.equalTo(''h1'')
PropTypes.equalTo(''div'')
PropTypes.equalTo(''img'')
...

Aquí está la implementación ...

React.PropTypes.equalTo = function (component) {
  return function validate(propValue, key, componentName, location, propFullName) {
    const prop = propValue[key]
    if (prop.type !== component) {
      return new Error(
        ''Invalid prop `'' + propFullName + ''` supplied to'' +
        '' `'' + componentName + ''`. Validation failed.''
      );
    }
  };
}

Podría extender esto fácilmente para aceptar uno de muchos tipos posibles. Tal vez algo como ...

React.PropTypes.equalToOneOf = function (arrayOfAcceptedComponents) {
...
}

Answer 4

Publiqué el paquete que permite validar los tipos de elementos React https://www.npmjs.com/package/react-element-proptypes :

const ElementPropTypes = require(''react-element-proptypes'');

const Modal = ({ header, items }) => (
    <div>
        <div>{header}</div>
        <div>{items}</div>
    </div>
);

Modal.propTypes = {
    header: ElementPropTypes.elementOfType(Header).isRequired,
    items: React.PropTypes.arrayOf(ElementPropTypes.elementOfType(Item))
};

// render Modal 
React.render(
    <Modal
       header={<Header title="This is modal" />}
       items={[
           <Item/>,
           <Item/>,
           <Item/>
       ]}
    />,
    rootElement
);

Answer 5

static propTypes = {

  children : (props, propName, componentName) => {
              const prop = props[propName];
              return React.Children
                       .toArray(prop)
                       .find(child => child.type !== Card) && new Error(`${componentName} only accepts "<Card />" elements`);
  },

}

Answer 6

Puede agregar un apuntalante a su componente de Card y luego buscar este accesorio en su componente CardGroup . Esta es la forma más segura de lograr esto en React.

Este accesorio se puede agregar como un valor predeterminado por lo que siempre está ahí.

class Card extends Component {

  static defaultProps = {
    isCard: true,
  }

  render() {
    return (
      <div>A Card</div>
    )
  }
}

class CardGroup extends Component {

  render() {
    for (child in this.props.children) {
      if (!this.props.children[child].props.isCard){
        console.error("Warning CardGroup has a child which isn''t a Card component");
      }
    }

    return (
      <div>{this.props.children}</div>
    )
  }
}

Comprobar si el componente de la Tarjeta es efectivamente un componente de la Tarjeta utilizando el type y displayName no es seguro, ya que puede no funcionar durante el uso de la producción como se indica aquí: https://github.com/facebook/react/issues/6167#issuecomment-191243709

Answer 7

Puede usar una función propType personalizada para validar a los niños, ya que los niños son sólo accesorios. También escribí un artículo sobre esto, si quieres más detalles.

var CardGroup = React.createClass({
  propTypes: {
    children: function (props, propName, componentName) {
      var error;
      var prop = props[propName];

      React.Children.forEach(prop, function (child) {
        if (child.type.displayName !== ''Card'') {
          error = new Error(
            ''`'' + componentName + ''` only accepts children of type `Card`.''
          );
        }
      });

      return error;
    }
  },

  render: function () {
    return (
      <div>{this.props.children}</div>
    );
  }
});