当前位置：首页 > React

react课程表实现

2026-01-27 16:19:08React

实现React课程表的基本步骤

创建课程表需要设计数据结构、渲染UI以及处理交互逻辑。以下是一个基于React的实现方案：

数据结构设计 使用数组存储课程信息，每个课程包含名称、时间、地点等属性：

const courses = [
  { id: 1, name: '数学', time: '周一 8:00-10:00', location: 'A101' },
  { id: 2, name: '物理', time: '周三 14:00-16:00', location: 'B203' }
];

组件结构

Timetable：主容器组件
CourseCard：单个课程展示组件
WeekView：周视图布局组件

核心代码实现

课程卡片组件

function CourseCard({ course }) {
  return (
    <div className="course-card">
      <h3>{course.name}</h3>
      <p>{course.time}</p>
      <p>{course.location}</p>
    </div>
  );
}

周视图布局

function WeekView({ courses }) {
  const days = ['周一', '周二', '周三', '周四', '周五'];

  return (
    <div className="week-grid">
      {days.map(day => (
        <div key={day} className="day-column">
          <h4>{day}</h4>
          {courses
            .filter(course => course.time.includes(day))
            .map(course => <CourseCard key={course.id} course={course} />)
          }
        </div>
      ))}
    </div>
  );
}

样式处理方案

使用CSS Grid实现响应式布局：

.week-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.day-column {
  border: 1px solid #ddd;
  padding: 0.5rem;
}

.course-card {
  background: #f5f5f5;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border-radius: 4px;
}

交互功能扩展

添加课程功能

function AddCourseForm({ onAdd }) {
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    onAdd({ name, time: '待定', location: '待定' });
    setName('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="课程名称"
      />
      <button type="submit">添加课程</button>
    </form>
  );
}

状态管理方案

使用React Context管理全局状态：

const TimetableContext = createContext();

function TimetableProvider({ children }) {
  const [courses, setCourses] = useState(initialCourses);

  const addCourse = (newCourse) => {
    setCourses([...courses, { ...newCourse, id: Date.now() }]);
  };

  return (
    <TimetableContext.Provider value={{ courses, addCourse }}>
      {children}
    </TimetableContext.Provider>
  );
}

完整示例整合

将各组件组合成完整应用：

function App() {
  return (
    <TimetableProvider>
      <div className="app">
        <AddCourseForm />
        <WeekView />
      </div>
    </TimetableProvider>
  );
}