react-elastic-carousel添加自定义箭头报type未定义错误怎么解决

直接报错原因 #

• 你在组件顶层作用域写了一行无用代码 type === consts.PREV;，这里的type变量没有任何声明，所以触发了ESLint的no-undef规则抛出错误，这行代码没有任何业务作用，直接删除即可。

其他附带的代码问题 #

• 自定义箭头函数内的图标渲染逻辑错误：你导入的LeftArrow、RightArrow是SVG组件，直接用对象包裹{LeftArrow}无法正常渲染，需要改为JSX标签形式<LeftArrow />
• 组件缺少return语句：Carousel相关的JSX代码需要放在组件的return返回值里才会被渲染
• Carousel闭合标签语法错误：正确的闭合写法是</Carousel>，不是自闭合标签写法
• 注意如果使用的Button组件是第三方UI库组件，需要补充对应的import导入语句

修复后完整代码 #

import Carousel, { consts } from 'react-elastic-carousel';
// 如果使用的是antd的Button保留这行，自定义Button替换为对应导入路径即可
import { Button } from 'antd';
import LeftArrow from './Assets/Group 1316.svg'
import RightArrow from './Assets/Group 1317.svg'

export default function BootcampNew (props) {
  const breakPoints = [
    { width: 1, itemsToShow: 1 },
    { width: 550, itemsToShow: 2 },
    { width: 768, itemsToShow: 3 },
    { width: 900, itemsToShow: 4 },
  ];

  const myArrow = ({type,onClick, isEdge}) => {
    const pointer = type === consts.PREV ? <LeftArrow /> : <RightArrow />
    return(
      <Button onClick={onClick} disabled={isEdge}>{pointer}</Button>
    )
  }

  return (
    <Carousel
      renderArrow={myArrow}
      breakPoints={breakPoints}
      pagination={false}
    >
      <CourseCard/>
      {/* 剩余轮播子元素放在此处即可 */}
    </Carousel>
  )
}

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