reactjs - jsx中的三元将selected属性添加到选项

Question

我正在使用以下代码将 selected 添加到选项中:

 <select name="hourSelect" ref="hourSelect">
           {hourSelect.map((option) => (
                  <option value={option.value} {(selectedHour == option.value) ? 'selected' : ''}>{option.label} </option>
            ))}
        </select>

我收到语法错误:
语法错误:C:/sites/CalendarRedux/src/components/modals/AddAchievementModal.js: Unexpected token, expected ... (94:52)

  92 |             <select name="hourSelect" ref="hourSelect">
  93 |                {hourSelect.map((option) => (
> 94 |                       <option value={option.value} {(selectedHour == option.value) ? 'selected' : ''}>{option.label} </option>
     |                                                     ^
  95 |                 ))}
  96 |             </select>

Answer 1

将值 true 或 false 分配给 selected属性(错过了属性名称)，如下所示:

<option value={option.value} selected = {selectedHour == option.value ? true : false}>{option.label} </option>

我会建议你使用 controlled component通过使用 select 的 value 属性并通过 state 保持该值多变的。

检查工作片段:

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }

    render(){
       return(
           <select onChange={e => {}}>
              <option value='1' disabled>Select</option>
              {
                  [2,3,4].map((i,j)=>{
                      return <option selected={i == 2 ? true : false} key={i} value={i}>{i}</option>
                  })
              }
           </select>
       );
    }
}

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>