Question

我准备用React创建下一个页面，但我找不到如何将可选属性放入组件中，例如：

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

我想仅在this.state.current == this.state.total时在ProgressBar中添加有效属性。

我该怎么做？

此外，可能有一种简单的方法可以在两个选项活动和剥离之间切换？像

这样的东西

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

React JSX的可选属性

1 个答案: