<span> nie może pojawić się jako dziecko z <select> w reakcji

Question

Stworzyłem komponent rozwijany select, którego używam w formularzu redux w aplikacji react-redux. Lista rozwijana działa świetnie i nie mam wpływu na wydajność, ale w przeglądarce otrzymuję następujące ostrzeżenie.

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

Nie jestem pewien, dlaczego otrzymaliśmy ten błąd, a ja nie przekazując żadnych <span> elementów. Oto kod, którego używam do utworzenia listy rozwijanej select (opcje to tablica obiektów, która zawiera atrybuty każdej opcji, opcja.text jest wartością ciągu znaków, która będzie przeglądana przez użytkownika, więc może to być coś w stylu "Opcja 1" lub "Opcja 2".)

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

Wszelkie pomysły na temat tego, dlaczego otrzymam to ostrzeżenie i jak mogę to poprawić. Używam reakcji 0.14.3

Answer 1

Wydaje się, że niektóre dodatkowe przestrzenie w składni JSX stworzyli span. Przetestowałem twój kod, a po poprawnym ponownym wcięciu błąd zniknął.

Przed z błędem: https://jsfiddle.net/snahedis/69z2wepo/28561/

A po ponownym wcięcia: https://jsfiddle.net/snahedis/69z2wepo/28564/

Answer 2

Masz problem ze zmienną re-definicją. Twój parametr funkcji mapy nazywa się "opcja", więc podczas pisania <option>, reagowanie będzie próbowało potraktować obiekt określony przez zmienną option jako klasę reakcji. Spróbuj zamiast tego -

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