React滑块自定义箭头失效、当前序号显示及双滑块占比布局咨询

问题1：自定义箭头点击无响应 #

• 根本原因：settings中配置自定义箭头时未透传Slider组件注入的onClick等属性，导致点击事件没有绑定滑动逻辑；同时你在Slider子元素的map中重复渲染了箭头组件，属于无效冗余代码。
• 修复方法：
  1. 配置自定义箭头时确保透传Slider注入的所有属性，也可以直接传递组件引用由Slider自动注入属性
  2. 删除Slider子元素map中重复渲染的<PrevArrow/>、<NextArrow/>代码
  3. 额外注意当前代码中PrevArrow用了右箭头图标、NextArrow用了左箭头图标，逻辑是反的，可根据交互需求调整

const settings = {
  // 其余原有配置保留，删除重复的focusOnSelect定义
  // 两种箭头配置二选一即可
  nextArrow: NextArrow, // 直接传组件引用，Slider会自动注入props
  prevArrow: PrevArrow,
  // 或手动透传props写法：nextArrow: <NextArrow {...props}/>
}

问题2：无法正常显示当前滑块序号 #

• 根本原因：没有存储当前激活滑块的状态，且序号写在了每个slide的循环内部，没有绑定当前索引值。你提供的代码片段还存在未闭合标签、map循环逻辑错误的语法问题，修复时需要注意补全。
• 修复方法：
  1. 用useState存储当前滑块索引，函数组件不能使用类组件的this.setState
  2. 利用Slider提供的afterChange回调更新当前索引
  3. 将序号渲染逻辑移到Slider组件外部，避免每个slide都重复渲染

import { useState } from 'react'

export const News = ({ pageContext }) => {
  // 新增当前滑块状态
  const [currentSlide, setCurrentSlide] = useState(0)
  const sliderElements = [
    ...data.allStrapiArticle.nodes,
    ...data.allStrapiArticle.nodes,
    ...data.allStrapiArticle.nodes
  ]

  function PrevArrow(props) {
    const { className, onClick } = props
    return (
        <button className={`${className} outline-none`} onClick={onClick}>
            <IconArrowLeft />
        </button>
    )
  }

  function NextArrow(props) {
    const { className, onClick } = props
    return (
        <button className={`${className} outline-none`} onClick={onClick}>
            <IconArrowRight />
        </button>
    )
  }

  const settings = {
    infinite: true,
    focusOnSelect: true,
    arrows: true,
    dots: true,
    slidesToShow: 2,
    slidesToScroll: 1,
    speed: 400,
    autoplaySpeed: 4000,
    nextArrow: NextArrow,
    prevArrow: PrevArrow,
    afterChange: (current) => setCurrentSlide(current),
    responsive: [
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
            },
        },
    ],
  }

  return (
    <div>
      {/* 序号放在Slider外部全局渲染 */}
      <div className="slide-index">
        <span>{currentSlide + 1}</span>
        <span> / {sliderElements.length}</span>
      </div>
      <Slider {...settings}>
        {sliderElements.map((article, index) => (
          <div key={index} className="slide-item">
            {/* 单个滑块的文章内容写在这里 */}
          </div>
        ))}
      </Slider>
    </div>
  )
}

问题3：同页面两个滑块70%/30%布局 #

• 修复方法：使用flex布局包裹两个滑块容器即可

<div style={{display: 'flex', gap: '16px', width: '100%'}}>
  <div style={{flex: '0 0 70%'}}>
    {/* 第一个滑块完整代码 */}
  </div>
  <div style={{flex: '0 0 30%'}}>
    {/* 第二个滑块完整代码 */}
  </div>
</div>

额外给每个Slider根元素加width: 100%样式，避免内容溢出撑坏布局。

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