reactに条件付きで単一の属性を適用しますか？

Question

基本的に単一のcss属性を条件付きで適用すると、反応の中でより短い/インラインバージョンがありますか？この文脈で

setStyle() { 
    const style = { 
     display: 'flex', 
     flexDirection: 'column', 
     height: 485 
    } 
    if (this.state.zoom) { 
     style.position = 'absolute' 
    } 
    return style 
    } 

    <div ref='container' style={this.setStyle()}> 

何か：

style={{ 
    display: 'flex', 
    flexDirection: 'column', 
    height: 485 
    position: absolute // Make this conditional 
}} 

Answer 1

Object.assign

を

let style = Object.assign({ 
    display: 'flex' 
}, this.state.zoom && { position: 'absolute' }) 

使用spread/rest properties

let style = { 
    display: 'flex', 
    ...this.state.zoom && { position: 'absolute' } 
} 

インラインを使用して、インライン：

<div 
    style={ 
    Object.assign({ 
     display: 'flex' 
    }, this.state.zoom && { position: 'absolute' }) 
    } 
/> 

<div 
    style={{ 
    display: 'flex', 
    ...this.state.zoom && { position: 'absolute' } 
    }} 
/>