时间戳

首页 > 解决方案 > 反应中的 col 标签问题。错误：col 是一个 void 元素标记，既不能有 `children`，也不能使用 `dangerouslySetInnerHTML`

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

问题描述

在35:50 分钟通过此链接学习 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;

浏览器错误： 在此处输入图像描述

没有初学者运气叹息:(

标签： javascriptreactjsjsx

解决方案

你有col错的情况。

小写，col表示HTML<col>元素，只能是空元素。但是，Col大写字母C似乎是antd库中的一个组件。参见例如它的使用here。此外，如果您密切关注视频，它确实使用<Col ...>而不是<col ...>.

在您的陈述和各行中更改col为。Colimport<col ...> ... </col>

推荐阅读