React 18中如何不依赖jQuery实现手风琴滑块效果

原有实现的报错核心原因 #

• JSX中直接内嵌<script>标签不会被React执行，还会触发JSX标签解析错误，这是出现"无法识别<标签"报错的直接原因
• 基于jQuery的老插件默认是全局挂载逻辑，和Vite/CRA等React脚手架的模块化编译环境不兼容，即使安装了jQuery，插件本身也无法正确挂载到$实例上，会触发$ is not defined或$(...).accordionSlider is not a function类报错
• jQuery直接操作DOM的逻辑和React声明式渲染的机制天然冲突，哪怕勉强跑通，后续也容易出现DOM状态和React状态不同步的bug

无jQuery纯React实现方案 #

不需要引入任何第三方库，仅用React原生状态+CSS即可实现手动点击切换的手风琴滑块，完全匹配"无自动轮播、仅手动点击选择面板"的需求。

组件代码实现 #

import React, { useState } from 'react';
import './blog.css';
import {Article} from '../../components';
import {blog01, blog02, blog03, blog04, blog05} from './imports';

// 手风琴面板配置，可自行增减面板、新增标题/跳转链接等字段
const sliderPanels = [
  { id: 1, cover: 'assets/slider/image1.jpg' },
  { id: 2, cover: 'assets/slider/image2.jpg' },
  { id: 3, cover: 'assets/slider/image3.jpg' },
  { id: 4, cover: 'assets/slider/image4.jpg' },
  { id: 5, cover: 'assets/slider/image5.jpg' },
];

const Blog = () => {
  // 存储当前激活展开的面板ID，默认展开第一个，不需要默认展开可将初始值设为null
  const [activePanel, setActivePanel] = useState(1);

  return (
    <div className='gpt3__blog section__padding' id='blog'>
      <div className='gpt3__blog-heading'>
        <h1 className='gradient__text'>Portfolio</h1>
        <div className="accordion-slider">
          <div className="as-panels">
            {sliderPanels.map(panel => (
              <div
                key={panel.id}
                onClick={() => setActivePanel(panel.id)}
                className={`as-panel ${activePanel === panel.id ? 'as-active' : ''}`}
              >
                <img className="as-background" src={panel.cover} alt={`slider-panel-${panel.id}`} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Blog

配套样式（写入blog.css即可） #

.accordion-slider {
  width: 100%;
  margin: 2rem 0;
}
.as-panels {
  display: flex;
  width: 100%;
  height: 500px; /* 可根据设计需求调整滑块高度 */
  gap: 4px; /* 面板间的间距 */
}
.as-panel {
  flex: 1;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.4s ease; /* 调整数值可修改展开/收起动画速度 */
}
/* 激活面板的宽度占比，数值越大展开后占比越高 */
.as-panel.as-active {
  flex: 5;
}
.as-background {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

方案优势 #

• 零额外依赖，不需要引入jQuery或其他第三方滑块库，有效控制打包体积
• 完全遵循React状态驱动渲染逻辑，不存在DOM操作冲突问题
• 逻辑完全可控，后续需要在面板上叠加标题、描述、跳转按钮等内容时，可直接修改面板配置和模板，不需要受限于插件的固定API
• 无内置自动轮播逻辑，所有面板切换完全由用户点击触发，完全匹配需求

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