[解決済み] React JSX: selecting "selected" on selected <select> option

Question

In a React component for a <select> menu, I need to set the selected attribute on the option that reflects the application state.

In render() , the optionState is passed from the state owner to the SortMenu component. The option values are passed in as props from JSON.

render: function() {
  var options = [],
      optionState = this.props.optionState;

  this.props.options.forEach(function(option) {
    var selected = (optionState === option.value) ? ' selected' : '';

    options.push(
      <option value={option.value}{selected}>{option.label}</option>
    );
  });

// pass {options} to the select menu jsx

However that triggers a syntax error on JSX compilation.

Doing this gets rid of the syntax error but obviously doesn't solve the problem:

var selected = (optionState === option.value) ? 'selected' : 'false';

<option value={option.value} selected={selected}>{option.label}</option>

こんなこともやってみました。

var selected = (optionState === option.value) ? true : false;

<option value={option.value} {selected ? 'selected' : ''}>{option.label}</option>

これを解決するおすすめの方法はありますか？

どのように解決するのですか？

Reactは、これをさらに簡単にします。を定義する代わりに selected を各オプションに追加します。 と書くだけでよいのです。 value={optionsState} をselectタグ自体に記述します。 :

<select value={optionsState}>
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

詳しくは Reactの選択タグのドキュメント .

また、Reactはこの目的のために自動的にブーリアンを理解するので、単純に次のように書くことができます。 (注：推奨しません)

<option value={option.value} selected={optionsState == option.value}>{option.label}</option>

と入力すると、'selected' と適切に出力されます。