React中基于react-horizontal-timeline创建水平时间线的导入问题与组件拆分需求

First, let's fix that "HorizontalTimeline is not defined" error you're seeing — that's definitely an import issue since you're working with a third-party library component. Let's break this down step by step.

Step 1: Install the library (if you haven't already) #

Before you can use the component, you need to add it to your project. Run this command in your terminal:

npm install react-horizontal-timeline
# Or use yarn if that's your package manager
yarn add react-horizontal-timeline

Step 2: Import the component correctly #

Once installed, you need to import both the HorizontalTimeline component and its default styles (otherwise the timeline will look broken) in the file where you're using it:

import HorizontalTimeline from 'react-horizontal-timeline';
import 'react-horizontal-timeline/lib/styles.css';

Step 3: Encapsulate into a reusable component #

To keep your App.js clean and avoid redundancy, let's build a standalone component for your education timeline. Here's a complete implementation:

Create a new file: MyTimeline.js #

import React, { useState } from 'react';
import HorizontalTimeline from 'react-horizontal-timeline';
import 'react-horizontal-timeline/lib/styles.css';

// Define your education dates (adjust these to match your actual journey)
const EDUCATION_DATES = [
  '2017-09',
  '2021-06',
  '2021-08',
  '2023-12'
];

// Corresponding content for each timeline entry
const EDUCATION_DETAILS = [
  "Started my Bachelor's in Computer Science at XYZ University",
  "Graduated with honors, focused on full-stack development",
  "Enrolled in a postgraduate certification program for React",
  "Completed certification and started freelance projects"
];

const MyTimeline = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  const [previousIndex, setPreviousIndex] = useState(0);

  const handleTimelineClick = (index) => {
    setPreviousIndex(activeIndex);
    setActiveIndex(index);
  };

  return (
    <div className="timeline-wrapper">
      {/* Timeline container with responsive styling */}
      <div style={{ width: '80%', height: '100px', margin: '0 auto' }}>
        <HorizontalTimeline
          index={activeIndex}
          indexClick={handleTimelineClick}
          values={EDUCATION_DATES}
          // Optional: Add custom props here (e.g., minEventPadding, labelWidth) to tweak appearance
        />
      </div>
      {/* Content area for the selected timeline entry */}
      <div className="timeline-content text-center mt-4">
        <p className="fs-5">{EDUCATION_DETAILS[activeIndex]}</p>
      </div>
    </div>
  );
};

export default MyTimeline;

Use in your App.js #

Now your main App component stays lean and focused:

import React from 'react';
import MyTimeline from './MyTimeline'; // Adjust the path if your component is in a subfolder

function App() {
  return (
    <div className="App">
      <h1 className="text-center my-4">My Education & Career Journey</h1>
      <MyTimeline />
      {/* Add other portfolio components (projects, skills, etc.) here */}
    </div>
  );
}

export default App;

Quick Tips: #

• Don't skip importing styles.css — without it, the timeline will render as raw, unstyled elements.
• You can customize the timeline's appearance further using props like minEventPadding, maxEventPadding, or the styles prop to override default CSS. Check the library's internal docs for all available options.
• If you prefer class components over functional ones (like the example code you shared), you can easily refactor MyTimeline to use class-based state instead of hooks.

内容的提问来源于stack exchange，提问作者Tanzeel