React报错input为void元素标签不可含children或使用dangerouslySetInnerHTML求解

错误原因 #

报错的核心是你对FormControl组件的使用方式错误：

• React Bootstrap 中的FormControl组件底层渲染的是<input>这类空元素标签，空元素本身不允许包含任何子节点，你在代码中将所有FormGroup、Button等组件都放在了最外层的<FormControl>标签内部，触发了规则校验，抛出对应错误。

修复方法 #

直接删除包裹所有表单内容的最外层<FormControl>标签即可，修复后参考代码如下：

import React from 'react'
import { useParams } from 'react-router';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, FormGroup, FormControl, FormText, FormLabel, FormCheck } from "react-bootstrap";
const EditProduct = () => {
    debugger;
    let {id} = useParams();

    return (<>
        <FormGroup className="mb-3" controlId="formBasicEmail">
            <FormLabel>邮箱地址</FormLabel>
            <FormControl type="email" placeholder="输入邮箱" />
            <FormText className="text-muted">
                我们绝不会将你的邮箱分享给第三方。
            </FormText>
        </FormGroup>
        <FormGroup className="mb-3" controlId="formBasicPassword">
            <FormLabel>密码</FormLabel>
            <FormControl type="password" placeholder="输入密码" />
        </FormGroup>
        <FormGroup className="mb-3" controlId="formBasicCheckbox">
            <FormCheck type="checkbox" label="勾选确认" />
        </FormGroup>
        <Button variant="primary" type="submit">
            提交
        </Button>
    </>)
}
export default EditProduct;

内容的提问来源于stack exchange，提问作者Chetan