react-horizontal-scrolling-menu中Arrow组件失效及导入错误求助

你的错误是因为react-horizontal-scrolling-menu中没有导出名为Arrow的独立组件（或你使用的版本不支持该导出方式），导致导入后Arrow为undefined，触发组件类型无效的错误。

以下是不同版本的正确用法：

版本v2.x及以上（推荐） #

v2.x版本移除了内置的Arrow组件，需要自定义箭头组件后，通过ScrollMenu的LeftArrow/RightArrow属性传入：

import { ScrollMenu } from 'react-horizontal-scrolling-menu';

// 自定义箭头组件
const CustomArrow = ({ text, onClick, disabled }) => (
  <button 
    onClick={onClick} 
    disabled={disabled}
    style={{ 
      padding: '8px 12px',
      border: 'none',
      cursor: disabled ? 'not-allowed' : 'pointer'
    }}
  >
    {text}
  </button>
);

const App = () => {
  // 示例滚动项
  const scrollItems = [
    <div key="1" style={{ width: '200px', padding: '16px' }}>Item 1</div>,
    <div key="2" style={{ width: '200px', padding: '16px' }}>Item 2</div>,
    <div key="3" style={{ width: '200px', padding: '16px' }}>Item 3</div>,
  ];

  return (
    <ScrollMenu
      LeftArrow={<CustomArrow text="←" />}
      RightArrow={<CustomArrow text="→" />}
    >
      {scrollItems}
    </ScrollMenu>
  );
};

export default App;

自定义箭头组件可接收的核心参数：

• disabled: 布尔值，由ScrollMenu自动传入，标识当前方向是否已滚动到边界
• onClick: 点击事件处理函数，由ScrollMenu绑定滚动逻辑，无需自定义

版本v1.x（旧版本） #

若你使用的是v1.x版本，Arrow是命名导出组件，但需配合ScrollMenu使用（不能单独渲染）：

import { ScrollMenu, Arrow } from 'react-horizontal-scrolling-menu';

const App = () => {
  const scrollItems = [/* 你的滚动项 */];

  return (
    <ScrollMenu
      leftArrow={<Arrow disabled={false}>Left</Arrow>}
      rightArrow={<Arrow disabled={false}>Right</Arrow>}
    >
      {scrollItems}
    </ScrollMenu>
  );
};

export default App;

v1.x版本Arrow组件的参数：

• disabled: 布尔值，控制箭头是否禁用
• 子元素：箭头显示的文本或图标（如<Arrow>←</Arrow>）

你可以通过运行npm list react-horizontal-scrolling-menu命令查看当前使用的库版本，匹配对应用法。

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