错误：错误：输入是一个空元素标签，不能有 `children` 也不能使用 `dangerouslySetInnerHTML`。我没有找到解决方案答案

【问题标题】：Error: Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. no solution i found错误：错误：输入是一个空元素标签，不能有 `children` 也不能使用 `dangerouslySetInnerHTML`。我没有找到解决方案
【发布时间】：2021-10-19 16:19:36
【问题描述】：

我已经尝试了所有的堆栈溢出解决方案，但是没有运气。谁能告诉 html DOM 中的问题是什么。

错误：

错误：输入是一个空元素标签，不能有children 也不要使用dangerouslySetInnerHTML。

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 (<><FormControl>
        <FormGroup className="mb-3" controlId="formBasicEmail">
            <FormLabel>Email address</FormLabel>
            <FormControl type="email" placeholder="Enter email" />
            <FormText className="text-muted">
                We'll never share your email with anyone else.
            </FormText>
        </FormGroup>
        <FormGroup className="mb-3" controlId="formBasicPassword">
            <FormLabel>Password</FormLabel>
            <FormControl type="password" placeholder="Password" />
        </FormGroup>
        <FormGroup className="mb-3" controlId="formBasicCheckbox">
            <FormCheck type="checkbox" label="Check me out" />
        </FormGroup>
        <Button variant="primary" type="submit">
            Submit
        </Button>
    </FormControl></>)
}
export default EditProduct;

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

您应该使用 react-bootstrap 的 Form 组件而不是 FormControl 组件来包装表单元素。

您可以查看this sandbox 以查看工作示例。

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Button,
  Form,
  FormGroup,
  FormControl,
  FormText,
  FormLabel,
  FormCheck
} from "react-bootstrap";
const EditProduct = () => {
  return (
    <Form>
      <FormGroup className="mb-3" controlId="formBasicEmail">
        <FormLabel>Email address</FormLabel>
        <FormControl type="email" placeholder="Enter email" />
        <FormText className="text-muted">
          We'll never share your email with anyone else.
        </FormText>
      </FormGroup>
      <FormGroup className="mb-3" controlId="formBasicPassword">
        <FormLabel>Password</FormLabel>
        <FormControl type="password" placeholder="Password" />
      </FormGroup>
      <FormGroup className="mb-3" controlId="formBasicCheckbox">
        <FormCheck type="checkbox" label="Check me out" />
      </FormGroup>
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
  );
};
export default EditProduct;

【讨论】：