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

【问题标题】：How to export react-slick on another index.js file?如何在另一个 index.js 文件上导出 react-slick？
【发布时间】：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。

标签： reactjs react-slick

【解决方案1】：

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

只需删除最后一行export default services

【讨论】：

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