<span>不能作爲<select>的孩子出現在反應中

我已經創建了一個select下拉組件，我在react-redux應用程序中使用了redux-form。該下拉菜單效果很好，對性能沒有影響，但在瀏覽器中收到以下警告。<span>不能作爲<select>的孩子出現在反應中

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

我不知道爲什麼我收到這個錯誤，因爲我沒有在任何<span>元素傳遞。下面是我用來創建select下拉菜單的代碼（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

來源

2016-01-22 vsank7787

那麼，什麼是'option.text'？ – Amadan

谷歌搜索拿起[這]（https://github.com/glittershark/reactable/issues/177）「升級到版本0.12.0的反應，和0.14.3的反應/反應，並沒有注意到任何錯誤「 –

option.text是一個字符串值，將被用戶查看。所以它可能像'選項1'或'選項2'。 – vsank7787

看來，在您的JSX語法一些額外的空間已經創建了一個span。我測試了你的代碼，並且在正確的重新縮進之後，錯誤消失了。

與錯誤之前：https://jsfiddle.net/snahedis/69z2wepo/28561/

，並重新壓入後：https://jsfiddle.net/snahedis/69z2wepo/28564/

來源

2016-01-23 00:56:18 Snahedis

工作感謝！ – vsank7787

這工作..我不知道跨度將創建空間.. – Dhara

我有'''在'map'函數之後有同樣的錯誤...像這樣：'{this.state.items.map（（oneItem）=> {...}）};'。 ';'解決了我的問題。 –

您有一個可變的重新定義問題。您的地圖功能參數被稱爲「選項」，因此當您編寫<option>時，反應會嘗試將由變量option引用的對象視爲反應類。試試這個 -

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

來源

2016-01-22 09:16:07 hazardous

我不認爲這是問題的原因，我替換了你的代碼，並得到了同樣的錯誤。此外，下拉呈現和工作正常（當我使用參數''''''''''''''''optionNode'''，它只是發出警告。雖然這個警告確實阻止了我的應用程序中的任何功能，對於其他開發人員來說令人討厭和潛在的分心，我想避免。 – vsank7787

您是否使用react dev工具檢查呈現的層次結構？ – hazardous

<span>不能作爲<select>的孩子出現在反應中

回答

相關問題