Jak korzystać tablicę jako opcja dla reagują wybierz komponent

Question

Jeśli chcę zastąpić opcje

<option value="A">Apple</option> 
<option value="B">Banana</option> 

w podanym przykładzie przy użyciu tablicy w reakcji pliku JSX, w jaki sposób postępować?

<select value="B"> 
    <option value="A">Apple</option> 
    <option value="B">Banana</option> 
</select> 

pozdrawiam

niebieski

Answer 1

Bo to właśnie javascript, istnieje milion sposobów. Zwykle robię to, aby odwzorować kontener, aby wygenerować odwagę. Pętla for lub cokolwiek by również działało dobrze.

var Answer = react.createClass({ 

    render: function() { 

     var Data  = ['this', 'example', 'isnt', 'funny'], 
      MakeItem = function(X) { 
       return <option>{X}</option>; 
      }; 


     return <select>{Data.map(MakeItem)}</select>; 

    } 

}; 

Albo w ES6 w bardziej nowoczesny reagują można po prostu

var Answer = props => 
    <select>{props.data.map(x => <option>{x}</option>)}</select>; 

Answer 2

Jesteś zwykle obowiązek dostarczyć unikalny klucz, aby upewnić React może zidentyfikować elementy, można użyć UUID to zrobić lub klucz, który masz pod ręką, np

<Select name={field}> 
    {FBButtons.map(fbb => 
     <option key={fbb.key} value={fbb.key}>{fbb.value}</option> 
    )}; 
    </Select>