web-dev-qa-db-ja.com

React JSXのオプション属性

Reactで次のページを作成しようとしていますが、オプションの属性をコンポーネントに配置する方法が見つかりません。例：

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

this.state.current == this.state.totalの場合にのみ、ProgressBar内にactive属性を追加したいと思います。

これどうやってするの？

また、おそらく2つのオプションを切り替える簡単な方法がありますアクティブとストリップ？何かのようなもの

<ReactBootstrap.ProgressBar {this.state.current==this.state.total ? stripped : active} 
    now={this.state.current} max={this.state.total}/>
javascriptreactjsreact-jsx
11
zamuka

コンポーネントが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} />
20
Felix Kling