反应水平滚动组件不可见答案

【问题标题】：React horizontal scroll componet doesn't visible反应水平滚动组件不可见
【发布时间】：2021-12-06 07:58:15
【问题描述】：

我正在尝试使用 React horizontal scrolling menu 库实现 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;

请大家帮帮我。

【问题讨论】：

标签： javascript css reactjs horizontal-scrolling

【解决方案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}
/>

【讨论】：

谢谢！它奏效了