React-Elastic-Carousel 自定义箭头。

Question

我希望得到帮助，在我的React轮播组件中添加自定义箭头，但是我遇到了 "type未定义" 的错误，可以请有经验的人告诉我做错了什么吗？最好提供当前情况的解决方案。

谢谢。

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/>

- Anurag Verma

---

你似乎在 myArrow 函数外使用了 "type"。 - Sujit Singh

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>
      );

}

- Mahmoud El-Jiddawi

Answer 2

const pointer = type === consts.PREV ? : <img src={leftArrow} />:<img src={rightArrow} />

常量指针 = 类型 === 常量.前一个 ? : <img src={leftArrow} />:<img src={rightArrow} />

- smitha gowda