当在同一页中多次使用React组件时，显示方式不同。

Question

我有一个组件创建使用尾风CSS，这是呈现一个页面的一部分。<Section {...props} />。此组件是一个图像和描述，其中包括节的编号。

​

我在我的页面中使用了4次这个组件，但问题是它没有在每个实例中一致显示。它只在第一次使用时正确显示，如屏幕截图所示。

    import LandingStep1 from "../../../assets/images/Landing-step-1.png";
    import LandingStep2 from "../../../assets/images/Landing-step-2.png";
    import LandingStep3 from "../../../assets/images/Landing-step-3.png";
    import LandingStep4 from "../../../assets/images/Landing-step-4.png";
    import landing_1_svg from "../../../assets/images/Landing1.svg";
    import landing_2_svg from "../../../assets/images/Landing2.svg";
    import landing_3_svg from "../../../assets/images/Landing3.svg";
    import landing_4_svg from "../../../assets/images/Landing4.svg";
    import ProcessedButton from "./ProcessedButton";

    const Section = ({ reverse = false, num, title, paragraph, svg, img }) => {
      return (
        <div className="flex flex-col gap-y-24">
          <div
            className={`flex justify-between items-center gap-x-20 ${
              reverse ? "flex-row-reverse" : "flex-row"
            }`}
          >
            <div className="flex-1 flex-col">
              <div dir="rtl" className="flex gap-x-3 items-baseline">
                <span className="lg:text-7xl text-4xl font-bold text-[#C111A0]">
                  {num}
                </span>
                <span className="lg:text-3xl text-2xl text-[#63606B] font-bold">
                  {title}
                </span>
              </div>
              <p
                dir="rtl"
                className="lg:text-2xl text-xl font-thin text-[#63606B] mt-10"
              >
                {paragraph}
              </p>
            </div>
            <div className="flex-1 flex justify-center items-center">
              {/* eslint-disable-next-line jsx-a11y/alt-text */}
              <img className="max-w-sm flex-shrink  " src={svg} />
            </div>
          </div>
          {/* eslint-disable-next-line jsx-a11y/alt-text */}
          <img
            className="border-2 border-black rounded-lg w-auto max-w-3xl max-auto"
            src={img}
          />
        </div>
      );
    };

    const LandingDesc = () => {
      return (
        <>
          <div className="p-3 lg:p-20 mx-auto">
            {/* Heading */}
            <div className="w-full mb-32 mt-9 lg:mt-0">
              <h1 className="whitespace-nowrap text-center text-3xl md:text-5xl lg:text-[64px] text-[#63606B] font-bold ">
                مراحل استفاده از اپلیکیشن
              </h1>
            </div>
            <div>
              <Section
                num={1}
                title="پاسخ به سوالات"
                paragraph="ابتدا سوالات روانشناسی را پاسخ دهید. بر اساس پاسخ شما آرسون بهترین پیشنهاد سرمایه گذاری را ارائه میکند."
                svg={landing_1_svg}
                img={LandingStep1}
              />

              <Section
                num={2}
                title="مشاهده درجه ریسک پذیری"
                paragraph="بر اساس پاسخی که به سوالات داده اید، درحه ریسک پذیری شما مشخص میشود. با دانستن درجه ریسک پذیری سرمایه گذاری مطمئن تری خواهید داشت."
                svg={landing_2_svg}
                img={LandingStep2}
                reverse
              />

              <Section
                num={3}
                title="احظار هویت"
                paragraph="در این مرحله احراز هویت و تکمیل اطلاعات را انجام دهید."
                svg={landing_3_svg}
                img={LandingStep3}
              />

              <Section
                num={4}
                title="مشاهده پیشنهاد سرمایه گذاری"
                paragraph="بسته های سرمایه گزاری منطبق بر ریسک پذیری و سرمایه خود را مشاهده کنید."
                svg={landing_4_svg}
                img={LandingStep4}
                reverse
              />
            </div>

            <ProcessedButton />
          </div>
        </>
      );
    };

    export default LandingDesc;

Answer 1

我不知怎么意识到如何解决这个问题。因为我使用的是Figma，所以我要复制SVG，然后将它们粘贴到SVG文件中。所以我记得SVG有宽度和高度，我在它的文件中删除了它们(如下面所示)。现在它起作用了。

• :

<svg width="708" height="708" viewBox="0 0 708 708" fill="none">
...
..
.

• after :

<svg viewBox="0 0 708 708" fill="none">
...
..
.