React引入react-slick运行报Unexpected Token错误怎么解决

错误原因 #

• 你使用的是函数组件写法，函数组件不存在render()方法，你错误地将类组件专属的render逻辑直接写在了函数组件的JSX返回结构内，导致语法解析失败触发"Unexpected Token"报错
• react-slick的配置和Slider组件调用逻辑位置完全错误，不能嵌套在JSX返回标签内部

修正后完整代码 #

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";
import {ServicesContainer,ServicesH1,ServicesWrapper,ServicesCard,ServicesIcon,ServicesH2,ServicesP} from './ServicesElements';

const Services = () => {
    // slider配置需写在return语句外，函数组件无需render方法
    const settings = {
      dots: true,
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 1,
      autoplay: true,
      speed: 2000,
      autoplaySpeed: 2000,
      cssEase: "linear"
    };

    return (
        <ServicesContainer id="ourproducts">
            {/* 轮播组件直接插入JSX结构即可 */}
            <div>
                <h2>Auto Play</h2>
                <Slider {...settings}>
                  <div>
                      <h3>1</h3>
                  </div>
                  <div>
                      <h3>2</h3>
                  </div>
                  <div>
                      <h3>3</h3>
                  </div>
                </Slider>
            </div>
            <ServicesH1>Our Products</ServicesH1>
            <ServicesWrapper>
                <ServicesCard>
                    <ServicesIcon img src={require('../../images/ikansidat.jpg').default}/>
                    <ServicesH2>Eel / Unagi / Ikan Sidat</ServicesH2>
                    <ServicesP></ServicesP>
                </ServicesCard>

                <ServicesCard>
                    <ServicesIcon img src={require('../../images/minyakkelapasawit.jpg').default}/>
                    <ServicesH2>Crude Palm Oil</ServicesH2>
                    <ServicesP></ServicesP>
                </ServicesCard>

                <ServicesCard>
                    <ServicesIcon img src={require('../../images/cocopeat.jpg').default}/>
                    <ServicesH2>Coco Peat</ServicesH2>
                    <ServicesP></ServicesP>
                </ServicesCard>
            </ServicesWrapper>
        </ServicesContainer>
    )
}

export default Services

补充说明 #

如果需要把产品卡片放入轮播，直接用ServicesCard替换Slider内的测试div即可，不需要保留测试用的h3结构。修改完成后可清除本地编译缓存重启项目，避免缓存导致的残留报错。

内容的提问来源于stack exchange，提问作者Marviano