未捕获的 DOMException：无法在“文档”上执行“createElement”：提供的标签名称

Question

我已经创建了卡片组件，然后我调用了我的 ProductPage.js，之后我收到了类似 Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/Card. c3b0a67ff849f2bda062.JS') 不是有效名称。 最初它是 div，然后我更改为卡，如果更改 div，我会遇到错误，那么它工作正常我该如何解决这个问题。 供参考请找到所附图片。

代码是这样的。

ProductPage.js

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { getProductPage } from "../redux/actions";
import { useLocation } from "react-router-dom";
import getParams from "../utils/getParams";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from "react-responsive-carousel";
import Card from "../Components/Card.JS";

function ProductPage() {
  const dispatch = useDispatch();
  const product = useSelector((state) => state.product);
  const { page } = product;
  const { search } = useLocation();

  useEffect(() => {
    const params = getParams(search);
    console.log(params);
    const payload = {
      params,
    };
    dispatch(getProductPage(payload));
  }, []);
  return (
    <div style={{ margin: "0 10px" }}>
      {page.title}
      <Carousel renderThumbs={() => {}}>
        {page.banners &&
          page.banners.map((banner, index) => (
            <a
              key={index}
              style={{ display: "block" }}
              href={banner.navigateTo}
            >
              <img src={banner.img} alt="" />
            </a>
          ))}
      </Carousel>
      <div>
        {page.products &&
          page.products.map((product, index) => (
            <Card key={index}>
              <img src={product.img} alt="" />
            </Card>
          ))}
      </div>
    </div>
  );
}

export default ProductPage;

卡片.js

import React from "react";
import "./style.css";

function Card(props) {
  return <div className="card">{props.card}</div>;
}

export default Card;

Answer 1

您正在卡片内使用 img 标签，因此您需要渲染孩子而不是 props.card。

import React from "react";
import "./style.css";

function Card(props) {
  return <div className="card">{props.children}</div>;
}

export default Card;