Реагировать: inline условно передать опору компоненту

Question

Я хотел бы знать, есть ли лучший способ условно передать опору, чем использовать оператор if.

Например, прямо сейчас у меня есть:

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

Есть ли способ, чтобы написать это без Условный оператор? Я думал что-то вдоль линий типа рядных, если-заявления в JSX:

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

Чтобы обернуть вверх: Я пытаюсь найти способ, чтобы определить опору для Child, но проход значение (или сделать что-то еще), так что Child по-прежнему тянет эту ценность от Child собственных getDefaultProps().

Answer 1

Вы были близки к своей идее. Оказывается, что прохождение undefined для пропеллера такое же, как его вообще не включает, которое по-прежнему будет вызывать значение пропущенного значения по умолчанию. Таким образом, вы могли бы сделать что-то вроде этого:

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

Определить props переменную:

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

, а затем использовать его в JSX:

<Child {...props} /> 

Вот решение в вашем коде:

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

Source, React documentation: 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> 
);