如何在另一个 index.js 文件上导出 react-slick？

Posted 2023-02-25

【中文标题】如何在另一个 index.js 文件上导出 react-slick？

【英文标题】：How to export react-slick on another index.js file?

【发布时间】：2021-11-06 14:26:28

【问题描述】：

我想按照它的文档将 react-slick 代码添加到我的 index.js（服务文件夹），但它不起作用。

我正在使用此方法在我的主 index.js 上显示/调用我的页面

index.js（服务文件夹），我想在这个文件上添加 react slick 代码

const Services = () => 
    return (
        <ServicesContainer id="ourproducts">
        <ServicesH1>Our Products</ServicesH1>

    )

export default Services

index.js，这个文件正在调用我其他页面的所有 index.js

import React,  useState  from 'react'
import Footer from '../components/Footer'
import HeroSection from '../components/HeroSection'
import InfoSection from '../components/InfoSection'
import  homeObjOne, homeObjTwo, homeObjThree  from '../components/InfoSection/Data'
import Navbar from '../components/Navbar'
import Services from '../components/Services'
import Sidebar from '../components/Sidebar'
const Home = () => 
    const [isOpen, setIsOpen] = useState(false);
    const toggle = () => 
        setIsOpen(!isOpen);
    ;
    return (
        <>
            <Sidebar isOpen=isOpen toggle=toggle />
            <Navbar toggle=toggle/>
            <HeroSection />
            <Services />
            <InfoSection ...homeObjOne/>
            <InfoSection ...homeObjTwo/>
            <InfoSection ...homeObjThree/>
            <Footer />
        </>
    );
;
export default Home;

我在 index.js（服务文件夹）上试过这个，但没有用 错误说“每个模块只允许一个默认导出”

import React,  Component  from "react";
import Slider from "react-slick";

import "~slick-carousel/slick/slick.css"; 
import "~slick-carousel/slick/slick-theme.css";

export default, Services class MultipleItems extends Component 
    render() 
      const settings = 
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 3
      ;
      return (
        <div>
          <h2> Multiple items </h2>
          <Slider ...settings>
            <div>
              <h3>1</h3>
            </div>
            <div>
              <h3>2</h3>
            </div>
            <div>
              <h3>3</h3>
            </div>
            <div>
              <h3>4</h3>
            </div>
            <div>
              <h3>5</h3>
            </div>
            <div>
              <h3>6</h3>
            </div>
            <div>
              <h3>7</h3>
            </div>
            <div>
              <h3>8</h3>
            </div>
            <div>
              <h3>9</h3>
            </div>
          </Slider>
        </div>
      );
    

【问题讨论】：

您正在导出services。您的意思是改为导出 MultipleItems 吗？

是的，我只想导出服务。所以 react slick 的滑块将显示在我的主 index.js 上

那么你为什么叫你的班级MultipleItems而不是Services（使用无效的语法）？你没有在任何地方导入MultipleItems。

【参考方案1】：

您在 index.js 文件中导出两个默认值

只需删除最后一行export default services

【讨论】：

尝试删除它，但它不起作用