Question

我创建了一个选择下拉组件，我在react-redux应用程序中以redux形式使用它。下拉列表运行良好，我对性能没有影响，但在浏览器中我收到以下警告。警告：validateDOMNesting（...）：＆lt; span＆gt;不能作为＆lt; select＆gt;的孩子出现。我不知道为什么我收到这个错误，因为我没有传递任何＆lt; span＆gt;元素。下面是我用来创建select下拉列表的代码（options是一个包含每个选项属性的对象数组.option.text是一个字符串值，将由用户查看。所以它可能是类似的＆＃39;选项1＆＃39;或＆＃39;选项2＆＃39;。）回来（＆lt; select {... other}＆gt; ＆lt; option /＆gt; { options.map（（option）=＆gt; { 返回＆lt; option key = {option.value} value = {option.value}＆gt; {option.text}＆lt; / option＆gt; }） }＆lt; / select＆gt; ）关于为什么我会收到这个警告的任何想法，以及我如何纠正这个问题。我正在使用反应0.14.3

Answer 1

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

之前出现错误：https://jsfiddle.net/snahedis/69z2wepo/28561/

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

Answer 2

您有一个可变的重新定义问题。您的map函数参数称为“option”，因此当您编写<option>时，react会尝试将变量option引用的对象视为反应类。试试这个 -

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

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

2 个答案: