可選屬性與之反應JSX

Question

我即將進行下一次我的網頁有反應，我找不到如何把一個可選的屬性到組件，例如：

<ReactBootstrap.ProgressBar active now={this.state.current} max={this.state.total}/> 

我要添加活動只有在ProgressBar裏面的屬性this.state.current == this.state.total。

我該怎麼做？

而且，有可能是一個簡單的方法，以兩個選項活躍和剝離之間切換？像

<ReactBootstrap.ProgressBar {this.state.current==this.state.total ? stripped : active} 
    now={this.state.current} max={this.state.total}/> 

Answer 1

的東西，如果組件正確處理false值，只需隨時添加道具：

let stripped = this.state.current === this.state.total; 

<ReactBootstrap.ProgressBar 
    stripped={stripped} 
    active={!stripped} 
    now={this.state.current} 
    max={this.state.total} 
?> 

如果你絕對必須通過一個或另一個，你可以創建一個對象，並將其擴展到元素：

let props = { 
    [this.state.current === this.state.total ? 'stripped' : 'active']: true, 
    now: this.state.current, 
    max: this.state.total, 
}; 

<ReactBootstrap.ProgressBar {...props} />