reactjs React-vertical-时间轴未显示,输出HTML使用“is-hidden”类隐藏元素

jhkqcmku  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(89)

我试图在我的项目上实现一个垂直的时间轴。但它没有显示在生成的HTML代码上。当我试图检查它时,我看到类被生成为隐藏“is-hidden”。我认为它可能与相交观察器有问题。

时间轴.js文件

"use client";

import React from "react";
import SectionHeading from "./section-heading";
import {
  VerticalTimeline,
  VerticalTimelineElement,
} from "react-vertical-timeline-component";
import "react-vertical-timeline-component/style.min.css";
import { timelineData } from "@/lib/data";
import { useSectionInView } from "@/lib/hooks";

export default function Experience() {
  const { ref } = useSectionInView("Timeline");

  return (
    <section
      id="timeline"
      ref={ref}
      className="scroll-mt-28 mb-28 sm:mb-40 text-center"
    >
      <SectionHeading>Timeline</SectionHeading>
      <VerticalTimeline lineColor="">
        {timelineData.map((item, index) => (
          <React.Fragment key={index}>
            <VerticalTimelineElement
              contentStyle={{
                background: "rgba(255, 0, 255, 0.05)",
                boxShadow: "none",
                border: "1px solid rgba(0, 230, 0, 0.05)",
                textAlign: "left",
                padding: "1.3rem 2rem",
              }}
              contentArrowStyle={{
                borderRight: "0.4rem solid rgba(255, 255, 255, 0.5)",
              }}
              date={item.date}
              icon={item.icon}
              iconStyle={{
                background: "rgba(255, 255, 255, 0.15)",
                fontSize: "1.5rem",
              }}
            >
              <h3 className="font-semibold capitalize">{item.title}</h3>
              <p className="font-normal !mt-0">{item.location}</p>
              <p className="!mt-1 !font-normal text-gray-700 dark:text-white/75">
                {item.description}
              </p>
            </VerticalTimelineElement>
          </React.Fragment>
        ))}
      </VerticalTimeline>
    </section>
  );
}

字符串

data.js文件

{
    index_number: 1,
    title: "Bachelor's Degree",
    location: "Bangladesh",
    description:
      "I completed my Bachelor's Degree in Computer Science and Software Engineering at the American International University-Bangladesh.",
    tags: ["CSSE", "Bachelors", "Graduation"],
    date: "2-September-1994",
    icon: <BiSolidGraduation />,
  },
  {
    index_number: 1,
    title: "Bachelor's Degree",
    location: "Bangladesh",
    description:
      "I completed my Bachelor's Degree in Computer Science and Softwarelre asjdajs.",
    tags: ["CSSE", "Bachelors", "Graduation"],
    date: "11-September-2021",
    icon: <BiSolidGraduation />,
  },```

oyxsuwqo

oyxsuwqo1#

这里也有同样的问题,默认情况下,它们被分配了一个is-hidden CSS类。
我已经在VerticalNode中添加了一个visible={true}来暂时解决这个问题,但我认为默认情况下它应该设置为true。

相关问题