nur Kinder eines bestimmten Typs in einer Reaktionskomponente erlauben

Question

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

Answer 1

Sie können die display für jedes Kind verwenden, über Art zugegriffen:

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 2

Sie eine benutzerdefinierte PropType Funktion können Kinder validieren, da Kinder nur Requisiten sind. Ich habe auch ein article auf diesem geschrieben, wenn Sie mehr Details wollen.

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

Answer 3

Für 0.14+ Reagieren und ES6 Klassen verwenden, wird die Lösung wie folgt aussehen:

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 4

ich eine benutzerdefinierte PropType dafür gemacht, dass ich equalTo nennen. Sie können es so verwenden ...

class MyChildComponent extends React.Component { ... } 

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

Nun MyParentComponent akzeptiert nur Kinder, die MyChildComponent sind. Sie können, wie dies für HTML-Elemente prüfen ...

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

Hier ist die Implementierung ...

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

Schnell dies eine von vielen möglichen Arten zu akzeptieren erstrecken. Vielleicht so etwas wie ...

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

Answer 5

veröffentlichte ich das Paket, das die Typen von React Elemente https://www.npmjs.com/package/react-element-proptypes validieren 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 
); 

Answer 6

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 7

Sie hinzufügen können, eine Stütze zu Ihrem Card Komponente und dann prüfen, für diese Stütze in Ihrer CardGroup Komponente. Dies ist der sicherste Weg, dies in React zu erreichen.

Diese Stütze kann als defaultProp hinzugefügt werden, so dass sie immer da ist.

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

zu prüfen, ob die Kartenkomponente ist in der Tat eine Kartenkomponente von type oder displayName verwendet, ist nicht sicher, da es während der Produktion nicht Gebrauch arbeiten kann wie hier angegeben: https://github.com/facebook/react/issues/6167#issuecomment-191243709

Answer 8

Für diejenigen, die wie ich die Verwendung von TypeScript-Version. Sie können Filter/ändern Komponenten wie folgt aus:

this.modifiedChildren = React.Children.map(children, child => { 
      if (React.isValidElement(child) && (child as React.ReactElement<any>).type === Card) { 
       let modifiedChild = child as React.ReactElement<any>; 
       // Modifying here 
       return modifiedChild; 
      } 
      // Returning other components/string. 
      // Delete next line in case you dont need them. 
      return child; 
     });