使用React Horizontal Scrolling Menu库实现的横向滚动组件无显示且无报错问题求助

我帮你排查了代码里的几个关键问题，这应该就是页面没渲染出内容的原因，咱们一步步来修正：

问题1：Menu组件的参数传递错误 #

你当前的Menu函数直接接收list作为参数，但React组件的参数是一个props对象。当你调用Menu(list, selected)时，第一个参数是list数组，第二个参数selected根本没被接收到，而且MenuItem也没传递selected属性，导致ScrollMenu无法正确识别菜单项的选中状态。

问题2：Arrow组件的调用方式错误 #

你现在直接执行Arrow({ text: "<", className: "arrow-prev" })，这会在组件外部调用函数，返回的不是React元素，而是普通的DOM节点描述，无法被React正确渲染。应该用组件标签的方式使用<Arrow>。

问题3：MenuItem未关联选中状态（可选但建议修正） #

虽然这不会导致完全不显示，但你的MenuItem组件没有使用传入的selected属性，无法体现选中样式，建议一起修正。

修正后的完整代码 #

import React, { useState } from "react";
import { ScrollMenu } from "react-horizontal-scrolling-menu";

// 菜单项列表
const list = [
  { name: "item1" },
  { name: "item2" },
  { name: "item3" },
  { name: "item4" },
  { name: "item5" },
  { name: "item6" },
  { name: "item7" },
  { name: "item8" },
  { name: "item9" },
];

// 单个菜单项组件，接收selected属性判断选中状态
const MenuItem = ({ text, selected }) => {
  // 根据selected添加不同的样式类
  const itemClass = selected ? "menu-item text-black selected" : "menu-item text-black";
  return <div className={itemClass}>{text}</div>;
};

// 生成所有菜单项的组件，注意解构props
export const Menu = ({ list, selected }) => 
  list.map((el) => {
    const { name } = el;
    // 给MenuItem传递selected属性，判断当前项是否被选中
    return <MenuItem text={name} selected={selected === name} key={name} />;
  });

// Arrow组件保持不变，但要作为React组件使用
const Arrow = ({ text, className }) => {
  return <div className={className}>{text}</div>;
};

const AvataaarsScroll = () => {
  const [selected, setSelected] = useState("item1"); // 初始选中项改为对应name值
  const onSelect = (key) => {
    setSelected(key);
  };

  // 传递props给Menu组件，而不是直接传参数
  const menu = <Menu list={list} selected={selected} />;

  return (
    <div className="App">
      <ScrollMenu
        data={menu}
        // 用组件标签的方式使用Arrow
        arrowLeft={<Arrow text="<" className="arrow-prev" />}
        arrowRight={<Arrow text=">" className="arrow-next" />}
        selected={selected}
        onSelect={onSelect}
      />
    </div>
  );
};

export default AvataaarsScroll;

额外补充：添加基础样式 #

为了让横向滚动和箭头正常显示，你需要添加一些CSS样式（可以放在组件的CSS文件里）：

.menu-item {
  padding: 0 10px;
  margin: 0 5px;
  cursor: pointer;
  white-space: nowrap;
}

.menu-item.selected {
  font-weight: bold;
  color: #165DFF;
}

.arrow-prev, .arrow-next {
  padding: 10px;
  cursor: pointer;
  font-size: 20px;
}

.App {
  padding: 20px;
}

这样修改后，组件应该就能正常显示横向滚动菜单了。

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