收到错误“输入是一个无效元素标签，既不能有‘children’也不能使用‘dangerouslySetInnerHTML’”答案

【问题标题】：Getting the error 'input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`'收到错误“输入是一个无效元素标签，既不能有‘children’也不能使用‘dangerouslySetInnerHTML’”
【发布时间】：2020-03-05 06:47:47
【问题描述】：

这是我的代码的 sn-p，我收到错误“输入是一个 void 元素标记，不能有 children 也不能使用 dangerouslySetInnerHTML”。我究竟做错了什么？

<div className="modal-body">
    <p>{children}</p>

    <InputClient>

        <p>Enter Client Name</p>

        <InputText type="text" value={ clientName } onChange={this.handleChangeInputClientName} />

    </InputClient>

    <InputStockItem>

        <p>Enter Stock Item</p>

        <InputText type="text" value={ itemName } onchange={this.handleChangeInputStockItemName} />

    </InputStockItem>

</div>

【问题讨论】：

您可以为您的 InputText 组件添加代码吗？该错误表明您在某处有一个带有孩子的标记。该标签应该是自动关闭的并且没有任何子标签。
const InputText = styled.input.attrs({ className: 'form-control', })` margin: 0px; `
考虑添加一个完整的代码框示例来演示错误。 codesandbox.io/s/new

标签： reactjs

【解决方案1】：

input 无法渲染子元素。相反，您应该将input 包装在label 标记中，并将标签写在input 上方。你应该像下面这样重写你的代码。

 <div className="modal-body">
                <p>{children}</p>
            <label>
             Enter Client Name
             <InputClient>
                <InputText
                    type="text"
                    value={ clientName }
                    onChange={this.handleChangeInputClientName}
             />
             </InputClient>
             </label>
             <label>
             Enter Stock Item
             <InputStockItem>
                <InputText
                        type="text"
                        value={ itemName }
                        onchange={this.handleChangeInputStockItemName}
                />
             </InputStockItem>
           </label>
</div>

还有更多信息here

【讨论】：

我尝试在 InputText 之外添加但是我仍然遇到同样的错误！
你的InputStockItem 和InputClient 是什么样的？如果他们的inputs 是同样的问题。

【解决方案2】：

我想通了！我不小心将 InputClient 和 InputStockItem 组件声明如下：

const InputClient = styled.input.attrs({

})`
    margin: 0px;

`

和

const InputStockItem = styled.input.attrs({

})`
    margin: 0px;

`

这是我的一个愚蠢的错误，应该是这样的：


const InputClient = styled.div.attrs({

})`
    margin: 0px;

`

和


const InputStockItem = styled.div.attrs({

})`
    margin: 0px;

`

感谢您的帮助！

【讨论】：

毕竟是嵌套的inputs。