reactjs - 如何在另一个 index.js 文件上导出 react-slick?
问题描述
我想按照它的文档将 react-slick 代码添加到我的 index.js (服务文件夹)中,但它不起作用。
我正在使用此方法在我的主 index.js 上显示/调用我的页面
index.js(服务文件夹),我想在这个文件上添加反应光滑的代码
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>
);
}
}
解决方案
您在 index.js 文件中导出两个默认值
只需删除最后一行export default services
推荐阅读
- java - 如何有效地返回给定位数的最大可能整数
- javascript - 在 symfony4 树枝模板中分离 JavaScripts 文件
- image - 如何在 vuetify 中设置轮播图像的大小
- string - 多行中的 LLVM IR 字符串文字
- java - 如何在使用 Logstash 摄取到 ElasticSearch 的 JSON 文件中使用 Java 处理 HTML 内容?
- django-forms - 使用 django-form 在 ParentalManyToManyField wagtail 中检查默认特定选项
- javascript - 如何使用 AWS IoT 组一次更新组设备影子?
- vba - VBA向使用RangetoHTML(rng to Range)功能的电子邮件添加签名
- kubernetes - 有没有办法根据特定的元数据标签获取命名空间
- c - tdm-gcc 的 mingw32-gcc 抛出“缺少参数”错误