在 Astro 中部署不渲染 React 组件-解网

问：

我在 Astro 中遇到了 React 组件的问题。当我在本地托管时，它可以工作，但在部署的版本中，组件没有呈现。似乎是道具的问题，可能是未定义的，但我无法修复它。

这是我的 React 组件：

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

export default function ImageSlider({ props }) {
    console.log(props);

    return (
        <Swiper
            spaceBetween={50}
            slidesPerView={1}
            onSlideChange={() => console.log('slide change')}
            onSwiper={(swiper) => console.log(swiper)}
        >
            <p>Test 2.</p>
            {props.map((image, index) => (
                <SwiperSlide key={index}>
                    <img src={`/projects/Barrio_Walsh/${image}`} alt={`Image ${index + 1}`} />
                </SwiperSlide>
            ))}
        </Swiper>
    );
}

这是将 props 发送到组件的 Layout：

import Navigation from '../components/Navigation.astro';
import { ViewTransitions } from 'astro:transitions';
import '../styles/global.css';
import MySwiper from '../components/MySwiper';

interface Props {
    title: string;
}

const { title } = Astro.props;
const allPosts = await Astro.glob("../pages/projects/*.md");
const currentPath = Astro.url.pathname;
const currentProject = allPosts.find(post => post.url === currentPath);
const imagenes = currentProject?.frontmatter.imagenes;

// ... (other declarations)

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" />
    <title>{title}</title>      
    <ViewTransitions />
</head>
<body>
    <Navigation/>
    <div style="padding: 20px">
        <h1 class="text-5xl font-extrabold dark:text-white" style="text-align: center; color: black; font-weight: bold;">{ ProjectTitle }</h1>
        <slot/>
        {project && imagenes && <MySwiper props={imagenes} client:load/>}
    </div>
</body>
</html>

作为 prop 发送的图像数组来自 .md 文件。

当我对正确的映像目录进行硬编码时，它可以工作，但是当它来自 .md 时，它在部署时不起作用。

reactjs 部署组件 react-props astro

在 Astro 中部署不渲染 React 组件

Deploy do not render React component in Astro

评论