Reagieren: Inline bedingt Prop übergeben an Komponente

Question

Ich würde gerne wissen, ob es eine bessere Möglichkeit gibt, eine Requisite bedingt als eine if-Anweisung zu übergeben.

Zum Beispiel gerade jetzt habe ich:

var parent = React.createClass({ 
    propTypes: { 
    editable: React.PropTypes.bool.isRequired, 
    editableOpts: React.PropTypes.shape({...}) 
    }, 
    render: function() { 
    if(this.props.editable) { 
     return (
     <Child editable={this.props.editableOpts} /> 
    ); 
    } else { 
     // In this case, Child will use the editableOpts from its own getDefaultProps() 
     return (
     <Child /> 
    ); 
    } 
    } 
}); 

Gibt es eine Möglichkeit, dies ohne die if-Anweisung zu schreiben? Ich war etwas entlang der Linien von einer Art von Inline-if-Anweisung in der JSX denken:

var parent = React.createClass({ 
    propTypes: { 
    editable: React.PropTypes.bool.isRequired, 
    editableOpts: React.PropTypes.shape({...}) 
    }, 
    render: function() { 
    return (
     <Child 
     {this.props.editable ? editable={this.props.editableOpts} : null} 
     /> 
    ); 
    } 
}); 

Zur Nachbereitung: Ich versuche, einen Weg zu finden, eine Stütze für Child, zu definieren, aber Pass ein Wert (oder etwas anderes tun), so dass Child immer noch den Wert dieses Props von Child eigenen getDefaultProps() zieht.

Answer 1

Sie waren mit Ihrer Idee nah. Es stellt sich heraus, dass das Übergeben von undefined für eine Requisite das Gleiche ist, als wenn sie überhaupt nicht enthalten wäre, was immer noch den Standard-Requisitenwert auslösen würde. So könnte man so etwas tun:

var parent = React.createClass({ 
    propTypes: { 
    editable: React.PropTypes.bool.isRequired, 
    editableOpts: React.PropTypes.shape({...}) 
    }, 
    render: function() { 
    return <Child 
     editable={this.props.editable ? 
        this.props.editableOpts : 
        undefined} 
    />; 
    } 
}); 

Answer 2

definieren props Variable:

let props = {}; 
if (this.props.editable){ 
    props.editable = this.props.editable; 
} 

Und dann verwenden Sie es in JSX:

<Child {...props} /> 

Hier ist eine Lösung in Ihrem Code:

var parent = React.createClass({ 
    propTypes: { 
    editable: React.PropTypes.bool.isRequired, 
    editableOpts: React.PropTypes.shape({...}) 
    }, 
    render: function() { 
    let props = {}; 
    if (this.props.editable){ 
     props.editable = this.props.editable; 
    } 
    return (
     <Child {...props} /> 
    ); 
    } 
}); 

Quelle, Reagieren Dokumentation: https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes

Answer 3

const CleaningItem = ({ disabled = false }) => (
<View 
    style={[styles.container, disabled && styles.disabled]} 
    pointerEvents={disabled ? 'none' : 'auto'} 
> 
    <Button 
     disabled={disabled || null} 
     title="SELECT" 
    /> 
</View> 
);