反应中的 col 标签问题。错误：col 是一个空元素标签，既不能有 `children`，也不能使用 `dangerouslySetInnerHTML`答案

【问题标题】：Issue with col tags in react. Error: col is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`反应中的 col 标签问题。错误：col 是一个空元素标签，既不能有 `children`，也不能使用 `dangerouslySetInnerHTML`
【发布时间】：2021-10-02 12:01:44
【问题描述】：

在 35:50 分钟使用 link 学习 React.js col 标签出现问题。毫不奇怪，它适用于 youtuber。

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;

浏览器错误：

没有初学者运气叹息 :(

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

你有col的情况错了。

col小写表示HTML <col> element，只能为空元素。但是，带有大写 C 的 Col 似乎是来自 antd 库的组件。参见例如它的使用here。另外，如果你仔细看视频，它确实使用了<Col ...>而不是<col ...>。

在您的import 语句和各种<col ...> ... </col> 行中将col 更改为Col。

【讨论】：