jsx 中的三元将选定属性添加到选项

Question

我使用以下代码将所选添加到选项：

 <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：意外的标记，预期... (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>

我建议您通过使用 value 属性来使用受控组件select，并通过变量维护该值state。

检查工作片段：

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

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'))