React JSX[重复]的可选属性集

Question

我即将使用React制作下一个页面，我找不到如何将可配置属性集放入组件中，例如：

<ProgressBar active now={current} max={total}/>

仅当current==total时，我才想在ProgressBar中添加活动属性。

我该怎么做呢？

有一个简单的方法来切换两个选项活动和剥离？像这样的东西：

<ProgressBar {current==total ? stripped : active} now={current} max={total}/>

除了创建属性对象并将其展开{…props}

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