<span> 不能作为 <select> 的 child 在反应中出现

Question

我创建了一个 select 下拉组件，我在 react-redux 应用程序的 redux-form 中使用它。下拉菜单效果很好，对性能没有影响，但在浏览器中我收到以下警告。

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

我不确定为什么会收到此错误，因为我没有传递任何 <span> 元素。这是我用来创建 select 下拉列表的代码（选项是 object 的数组，其中包含每个选项的属性。option.text 是用户将查看的字符串值。所以它可能类似于 'Option 1' 或 'Option 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

您有一个变量 re-definition 问题。您的映射函数参数称为 "option"，因此当您编写 <option> 时，react 会尝试将变量 option 引用的对象视为 react class。试试这个 -

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

Answer 2

您的 jsx 语法中的一些额外空格似乎创建了 span。我已经测试了你的代码，在正确 re-indentation 之后错误消失了。

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

在 re-indentation 之后：https://jsfiddle.net/snahedis/69z2wepo/28564/

<span> 不能作为 <select> 的 child 在反应中出现

<span> cannot appear as a child of <select> in react

javascript

frontend

reactjs

redux