<span>不能作为<select>的子项出现在react中

Question

我创建了一个选择下拉组件,我在react-redux应用程序中以redux形式使用它.下拉列表运行良好,我对性能没有影响,但在浏览器中我收到以下警告.

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

Answer 1

似乎jsx语法中的一些额外空格已经创建了一个span.我已经测试了你的代码,并且在正确的重新缩进后,错误消失了.

之前的错误:https://jsfiddle.net/snahedis/69z2wepo/28561/

重新缩进后:https://jsfiddle.net/snahedis/69z2wepo/28564/