React: inline điều kiện vượt qua prop để thành phần

Question

Tôi muốn biết nếu có một cách tốt hơn để có điều kiện vượt qua một prop hơn bằng cách sử dụng một tuyên bố nếu.

Ví dụ, ngay bây giờ tôi có:

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

Có cách nào để viết những dòng này mà không có sự if-tuyên bố? Tôi đã suy nghĩ một cái gì đó dọc theo dòng của một loại inline-nếu-tuyên bố trong 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} 
     /> 
    ); 
    } 
}); 

Để quấn-up: Tôi đang cố gắng để tìm một cách để xác định một chỗ dựa cho Child chuyền, tuy nhiên một giá trị (hoặc làm điều gì đó khác) sao cho Child vẫn kéo giá trị của giá trị đó từ số của riêng mình getDefaultProps().

Answer 1

Bạn đã gần gũi với ý tưởng của mình. Nó chỉ ra rằng đi qua undefined cho một prop là giống như không bao gồm nó ở tất cả, mà vẫn sẽ kích hoạt giá trị prop mặc định. Vì vậy, bạn có thể làm một cái gì đó như thế này:

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

Xác định props biến:

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

Và sau đó sử dụng nó trong JSX:

<Child {...props} /> 

Dưới đây là một giải pháp trong mã của bạn:

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

Nguồn, Phản ứng tài liệu: 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> 
);