反应水平滚动组件不可见

Question

我正在尝试使用react水平滚动菜单库实现react水平滚动，但是当我在react应用程序中使用此组件时，它什么也没有显示，我也没有得到任何错误消息。

该组件的代码如下:

import React, { useState } from "react";
import { ScrollMenu } from "react-horizontal-scrolling-menu";
// list of items
const list = [
{ name: "item1" },
{ name: "item2" },
{ name: "item3" },
{ name: "item4" },
{ name: "item5" },
{ name: "item6" },
{ name: "item7" },
{ name: "item8" },
{ name: "item9" },
];
// One item component
// selected prop will be passed
const MenuItem = ({ text, selected }) => {
return <div className="menu-item text-black">{text}</div>;
};
// All items component
// Important! add unique key
export const Menu = (list) =>
list.map((el) => {
const { name } = el;
return <MenuItem text={name} key={name} />;
});
const Arrow = ({ text, className }) => {
return <div className={className}>{text}</div>;
};
const ArrowLeft = Arrow({ text: "<", className: "arrow-prev" });
const ArrowRight = Arrow({ text: ">", className: "arrow-next" });
const AvataaarsScroll = () => {
const [selected, setSelected] = useState(0);
const onSelect = (key) => {
setSelected(key);
};
// Create menu from items
const menu = Menu(list, selected);
return (
<div className="App">
<ScrollMenu
data={menu}
arrowLeft={ArrowLeft}
arrowRight={ArrowRight}
selected={selected}
onSelect={onSelect}
/>
</div>
);
};
export default AvataaarsScroll;

谁来帮帮我。

Answer 1

您通过名为data的属性将菜单项发送给ScrollMenu，但是您需要将它们作为子元素发送:

<div className="App">
<ScrollMenu
arrowLeft={ArrowLeft}
arrowRight={ArrowRight}
selected={selected}
onSelect={onSelect}
>
{menu}
</ScrollMenu>
</div>

…或…

<ScrollMenu        
arrowLeft={ArrowLeft}
arrowRight={ArrowRight}
selected={selected}
onSelect={onSelect}
children={menu}
/>