import React from "react";
import carousel from "../assets/index";
import Image from "next/image";

const threeD = () => {
    const length = carousel.length;
    const cardWidth = 288;
    const cardsGap = 4;
    const circumference = length * cardWidth + (length - 1 * 4);
    return (
        <div className={`carouselBox`}>
            <div
                className={`flex gap-[${cardsGap}px] w-[${circumference}px] h-[${circumference}px]`}
            >
                {carousel.map((item, index) => (
                    <Image
                        key={index}
                        src={item}
                        alt="yhello"
                        className={`w-[${cardWidth}px] card`}
                    />
                ))}
            </div>
        </div>
    );
};

export default threeD;

这是我的代码，我想从变量的宽度和高度，但它不是渲染请建议我任何解决方案。

const [cardWidth, setCardWidth] = useState(288)

我使用了useState钩子，但它没有从变量中获取宽度，这是任何解决方案