React兄弟组件通信：如何让轮播导航触发轨道组件moveForward函数？

我需要构建一个可复用的商品轮播组件，要求滑动轨道（ItemSlider）和滑动导航按钮（ItemSliderButtons）是独立的兄弟组件，方便灵活调整按钮位置。核心需求是点击导航按钮时，触发轨道组件内的moveForward/moveBackward滑动逻辑。

目前我采用的方案是在父组件中维护触发状态，轨道组件通过useEffect监听状态变化来执行滑动操作，但这种写法需要手动重置状态，代码冗余且不够直观，现有代码如下：

现有父组件代码 #

export const ParentWithSlider: React.FC = () => {
  const [moveForward, setMoveForward] = React.useState(false)
  const [moveBackward, setMoveBackward] = React.useState(false)
  return (
    <section>
      <ItemSliderButtons
        setMoveBackward={setMoveBackward}
        setMoveForward={setMoveForward}
      />
      <ItemSlider
        setMoveBackward={setMoveBackward}
        setMoveForward={setMoveForward}
        moveForward={moveForward}
        moveBackward={moveBackward}
      />
    </section>
  )
}

现有轨道组件监听逻辑 #

React.useEffect(() => {
  if (props.moveForward) {
    // 执行内部向前滑动逻辑
    triggerMyForwardFunc()
    // 手动重置状态
    props.setMoveForward(false)
  }
}, [props.moveForward])

优化方案一：通过Ref直接调用子组件方法 #

这种方式跳过状态中转，直接让导航组件调用轨道组件的滑动方法，逻辑更直接，也避免了状态重置的麻烦。

父组件实现 #

export const ParentWithSlider: React.FC = () => {
  // 创建ref用于获取轨道组件的方法引用
  const sliderRef = React.useRef<{
    moveForward: () => void;
    moveBackward: () => void;
  }>(null);

  return (
    <section>
      <ItemSliderButtons
        // 点击按钮时直接调用轨道组件的方法
        onMoveForward={() => sliderRef.current?.moveForward()}
        onMoveBackward={() => sliderRef.current?.moveBackward()}
      />
      <ItemSlider ref={sliderRef} />
    </section>
  );
};

轨道组件实现（用forwardRef暴露方法） #

import React from 'react';

// 定义组件props类型
type ItemSliderProps = {
  // 轨道组件的其他props
};

// 使用forwardRef转发ref，将内部方法暴露给父组件
export const ItemSlider = React.forwardRef<
  { moveForward: () => void; moveBackward: () => void },
  ItemSliderProps
>((props, ref) => {
  // 内部向前滑动逻辑
  const triggerMyForwardFunc = () => {
    // 这里写你的滑动实现，比如DOM操作、动画等
    console.log('执行向前滑动');
  };

  // 内部向后滑动逻辑
  const triggerMyBackwardFunc = () => {
    console.log('执行向后滑动');
  };

  // 将方法挂载到ref上，供父组件调用
  React.useImperativeHandle(ref, () => ({
    moveForward: triggerMyForwardFunc,
    moveBackward: triggerMyBackwardFunc,
  }));

  return <div className="item-slider">{/* 轮播内容渲染 */}</div>;
});

导航组件实现 #

type ItemSliderButtonsProps = {
  onMoveForward: () => void;
  onMoveBackward: () => void;
};

export const ItemSliderButtons: React.FC<ItemSliderButtonsProps> = ({
  onMoveForward,
  onMoveBackward,
}) => {
  return (
    <div className="slider-controls">
      <button onClick={onMoveBackward}>← 上一页</button>
      <button onClick={onMoveForward}>下一页 →</button>
    </div>
  );
};

优化方案二：用自定义Hook封装轮播逻辑（更利于复用） #

如果希望轮播的核心逻辑能在多个地方复用，推荐把滑动状态和方法抽离到自定义Hook中，父组件作为逻辑中转，子组件只负责UI渲染和触发回调，职责更清晰。

自定义Hook实现 #

import React from 'react';

export const useSlider = (totalItems: number) => {
  const [currentIndex, setCurrentIndex] = React.useState(0);

  const moveForward = () => {
    if (currentIndex < totalItems - 1) {
      setCurrentIndex(prev => prev + 1);
      // 这里添加滑动动画、DOM操作等逻辑
      console.log(`滑动到第${currentIndex + 1}项`);
    }
  };

  const moveBackward = () => {
    if (currentIndex > 0) {
      setCurrentIndex(prev => prev - 1);
      console.log(`滑动到第${currentIndex - 1}项`);
    }
  };

  return {
    currentIndex,
    moveForward,
    moveBackward,
  };
};

父组件使用Hook #

export const ParentWithSlider: React.FC = () => {
  // 传入轮播总项数，初始化Hook
  const { currentIndex, moveForward, moveBackward } = useSlider(5);

  return (
    <section>
      <ItemSliderButtons
        onMoveForward={moveForward}
        onMoveBackward={moveBackward}
      />
      {/* 将当前索引传递给轨道组件，用于渲染对应内容 */}
      <ItemSlider currentIndex={currentIndex} />
    </section>
  );
};

这种方式把轮播的核心逻辑完全抽离，轨道组件只需要根据currentIndex渲染对应内容，导航组件只负责触发回调，耦合度更低，复用性更强。

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