Ternary in jsx hinzufügen Attribut Option ausgewählt

Question

ich den folgenden Code bin mit einer Option ausgewählt hinzuzufügen:

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

ich die Syntaxfehler bekommen: Syntaxfehler: C:/sites/CalendarRedux/src /components/modals/AddAchievementModal.js: unerwartetes Token, erwartet ... (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

Sie überspringen die Attributnamen oder haben mehr Werte versuchen, dies angegeben:

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

Answer 2

Sie vermissen die selected= vor dem Wert der Eigenschaft.

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

(Als Randbemerkung, wenn selected einen boolean Wert erwartet, können Sie es zu selected={selectedHour == option.value} ändern könnten.)

Answer 3

den Wert wahr oder falsch selected Eigenschaft zuweisen (verpassten die Eigenschaftsnamen), wie dies:

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

ich werde vorschlagen, dass Sie die controlled component unter Verwendung des Wertes Eigenschaft select verwenden und diesen Wert durch state Variable beizubehalten.

Überprüfen Sie die Arbeits Schnipsel:

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

Answer 4

In meinem Fall ist es so, dass

selected={(city.city_id == person.city_id) ? 'selected' : ''}