React.js 137 错误

错误内容

input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

报错说明

input 是一个空元素标签，必须不能使用children或dangerouslySetInnerHTML属性。

报错代码

const Component = (props) => {
    // 如果props不小心传入了children属性，就会触发137报错
    // 同样的如果不小心传入了dangerouslySetInnerHTML属性，也会触发上述报错
    return (
        <div>
        <input {...props} />
        </div>
    )
}

修复方案

修复方案很简单，就是给空元素标签设置属性时，不能传入children和dangerouslySetInnerHTML属性，这在我们给标签直接传入一个对象时很容易发生。

通过翻看React的代码后，空标签标记为变量voidElementTags，除了上面的input外，还有menuitem、area、base、br、col、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。