simple - react validation password




erlauben nur Kinder eines bestimmten Typs in einer Reaktionskomponente (5)

Für React 0.14+ und die Verwendung von ES6-Klassen sieht die Lösung folgendermaßen aus:

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
  }
}

Ich habe eine Card Komponente und eine CardGroup Komponente, und ich möchte einen Fehler CardGroup wenn CardGroup Kinder hat, die keine Card Komponenten sind. Ist das möglich, oder versuche ich das falsche Problem zu lösen?


Sie können den displayName für jedes Kind verwenden, auf das über folgenden Typ zugegriffen wird:

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

Ich habe das Paket veröffentlicht, mit dem die Arten von React-Elementen https://www.npmjs.com/package/react-element-proptypes validiert werden können:

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

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

}

Sie können eine benutzerdefinierte propType-Funktion verwenden, um Kinder zu validieren, da Kinder nur Requisiten sind. Ich habe auch einen Artikel darüber geschrieben, wenn Sie mehr Details wünschen.

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




reactjs