未捕獲的DOMException：無法在“檔案”上執行“createElement”：提供的標簽名稱-有解無憂

我創建了卡片組件，然后我在我的 ProductPage.js 中呼叫了我收到的錯誤，如 Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/Card.c3b0a67ff849f2bda062.JS ') 不是有效名稱。最初是 div，然后我更改為卡片，如果更改 div，我會遇到上述錯誤，然后它作業正常，我該如何解決這個問題。對于參考請找到所附的圖片。未捕獲的 DOMException：無法在“檔案”上執行“createElement”：提供的標簽名稱

未捕獲的 DOMException：無法在“檔案”上執行“createElement”：提供的標簽名稱

和代碼是這樣的。

產品頁面.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;

uj5u.com熱心網友回復：

您在卡片中使用了 img 標簽，因此您需要渲染孩子而不是 props.card。

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

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

export default Card;

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/396975.html

標籤：javascript 反应反应组件

上一篇：運行npxcreate-react-appmy-app時出錯

下一篇：我可以更新道具的狀態嗎