时间戳

首页 > 解决方案 > 反应水平滚动组件不可见

javascript - 反应水平滚动组件不可见

问题描述

我正在尝试使用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;

任何人都请帮我解决这个问题。

标签： javascriptcssreactjshorizontal-scrolling

解决方案

ScrollMenu您正在通过名为 的属性将菜单项发送到data，但您需要将它们作为子元素发送：

<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}
/>

推荐阅读