反应-弹性-旋转木马定制箭

Question

我想获得帮助添加自定义箭头到我的反应旋转木马，但我得到的错误‘类型’是没有定义的undef。

有人能告诉我我做错了什么吗？最好是解决目前情况的办法。

谢谢

import Carousel, { consts } from 'react-elastic-carousel';
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 },
      ];
type === consts.PREV;

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

<Carousel
     renderArrow={myArrow}
     breakPoints={breakPoints}
     pagination={false}>
     <CourseCard/>
<Carousel/>

Answer 1

您不能在没有任何定义的情况下输入type === consts.PREV;，在这种情况下，它的唯一用途是在一个条件中，另一件事是您不返回函数组件正在呈现的内容，下面的代码应该可以解决这些问题。

import Carousel, { consts } from 'react-elastic-carousel';
import LeftArrow from './Assets/Group 1316.svg'
import RightArrow from './Assets/Group 1317.svg'

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

export default function BootcampNew (props) {


const breakPoints = [
        { width: 1, itemsToShow: 1 },
        { width: 550, itemsToShow: 2 },
        { width: 768, itemsToShow: 3 },
        { width: 900, itemsToShow: 4 },
      ];
      
      return (
        <Carousel renderArrow={myArrow} breakPoints={breakPoints} pagination={false}>
            <CourseCard/>
        </Carousel>
      );

}

Answer 2

const指针=类型=== consts.PREV？：<img src={leftArrow} />:<img src={rightArrow} />