<span>は<select>の子として現れることができません

Question

私はreact-reduxアプリケーションでredux-formで使用しているselectドロップダウンコンポーネントを作成しました。ドロップダウンは素晴らしいですが、パフォーマンスには何の影響もありませんが、ブラウザでは次の警告が表示されます。

Warning: validateDOMNesting(...): <span> cannot appear as a child of <select>.

私はどの<span>要素を渡すわけではないとして、私は、このエラーを受け取る理由は私はわかりません。ここでは、私は選択ドロップダウンを作成するために使用しているコードです（optionsは各オプションの属性を含むオブジェクトの配列です）option.textはユーザーが見る文字列の値なので、 'Option 1'または「オプション2」を参照してください）。

return (
    <select {...other}> 
    <option /> { 
    options.map((option) => { 
     return <option key={option.value} value={option.value}>{option.text}</option> 
    }) 
    } </select> 
) 

この警告を受け取る理由と解決方法については、私は反応を使用しています0.14.3

Answer 1

。 私はあなたのコードをテストし、正しい字下げの後にエラーが消えました。

エラーと前：https://jsfiddle.net/snahedis/69z2wepo/28561/

そして、インデントを再後：https://jsfiddle.net/snahedis/69z2wepo/28564/

Answer 2

あなたは可変的な再定義の問題があります。あなたのマップ関数のパラメータは "option"と呼ばれるので、<option>と書くと、reactは反応クラスとして変数optionによって参照されるオブジェクトを処理しようとします。代わりにこれを試してみてください - あなたのJSX構文で、いくつかの余分なスペースがspanを作成しているようだ

return (
    <select {...other}> 
    <option /> { 
    options.map((optionNode) => { 
     return <option key={optionNode.value} value={optionNode.value}>{optionNode.text}</option> 
    }) 
    } </select> 
)