标签导航：

本文介绍一个高效创建平滑滚动选框的react组件库——react fast marquee。该库易于集成，并与next.js兼容。

安装

安装过程非常简单：

npm install react-fast-marquee --save

导入组件：

import Marquee from "react-fast-marquee";

使用：

只需将需要滚动的组件或文本内容包裹在标签中即可：

<Marquee>
  {/* 这里可以是React组件，多个组件，或纯文本 */}
  This can be a React component, multiple React components, or just some text.
</Marquee>

就这么简单！React Fast Marquee 提供了丰富的属性，例如className、autofill、loop、gradient等，方便自定义滚动效果。 建议参考官方文档和示例，了解更多细节。

案例：品牌展示

以下示例展示如何在美食设备网站上使用该组件创建循环品牌展示：

const brands = [
    {
        id: 1,
        name: 'ecolab',
        logo: '/brands/ecolab.webp',
    },
    // ...更多品牌数据
];

const MarqueeBrands = () => {
    return (
        <Marquee>
            {brands.map(brand => (
                @@##@@
            ))}
        </Marquee>
    );
};

效果图：

{brand.name}

快速反应选框