React中使用col标签报错：col为void元素不可有子元素或使用dangerouslySetInnerHTML

报错原因 #

你遇到的报错是因为误用了小写的col，把Ant Design的栅格组件和原生HTML标签搞混了：

• Ant Design提供的栅格列组件名称是首字母大写的Col，属于React自定义组件，支持嵌套子元素
• 你写的小写col会被React识别为原生HTML的<col>标签，该标签是用于表格列定义的空元素，不允许包含任何子内容，所以触发了报错

解决方案 #

两步修改即可解决：

1. 修改导入语句，将小写的col改为大写Col
2. 将JSX中所有<col>标签替换为<Col>

修改后的完整代码如下：

import React from "react";
import millify from "millify";
import { Typography, Row, Col, Statistic } from "antd";
import { Link } from "react-router-dom";
const { Title } = Typography;

const HomePage = () => {
  return (
    <>
      <Title level={2} className="heading">  Global Crypto Stats </Title>

      <Row>
        <Col span={12}> <Statistic title="Total cryptocurrencies" value="5" /> </Col>
        <Col span={12}>  <Statistic title="Total Exchanges" value="5" /> </Col>
        <Col span={12}> <Statistic title="Total Market cap" value="5" /> </Col>
        <Col span={12}> <Statistic title="Total 24h volume" value="5" />  </Col>
        <Col span={12}>  <Statistic title="Total Markets" value="5" /> </Col>
      </Row>
    </>
  );
};

export default HomePage;

教程可以正常运行是因为教程代码里用的是正确的大写Col，你抄写代码时忽略了组件名的大小写要求，React规定所有自定义组件必须首字母大写，否则会被判定为原生HTML标签。

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