React JSX的可选属性

Question

我准备使用React创建下一个页面,我无法找到如何将可选属性放入组件中,例如:

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

我只想在ProgressBar中添加active属性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正确处理值,则只需添加props:

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