Question

我正在使用滑块，我要完成的工作是将数据属性从对象外部传递到项目符号导航，以使其与当前幻灯片匹配？我不知道如何被卡住。

有人可以帮忙吗？

import React from 'react';
import Swiper from 'react-id-swiper';

class RunSwiper extends React.Component {

  render() {

    const dataSlides = [
      'Ga voor grenzeloos',
      'Sectoren',
      'Wat wil jij?',
      'Vlogs',
      'Belangrijke data'
    ];

    const params = {
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
          return '<div class="' + className + '">' + (index + 1) + name + '</div>';
        }
      }
    };

    return (
      <Swiper {...params}>
          {
            dataSlides.map((name, index) => {
                return <div className={`swiper__step swiper__step--${index + 1}`} key={index} data-slide={name}>{name}</div>
            })
          }
      </Swiper>
    )
  }
}

export default runSwiper;

Answer 1

您已经收到index作为参数。因此，您可以使用该索引从name数组访问dataSlides。

const params = {
   pagination: {
      el: '.swiper-pagination',
      clickable: true,
      renderBullet: function (index, className) {
        return '<div class="' + className + '">' + (index + 1) + dataSlides[index] + '</div>';
      }
   }
};

如何将数据属性值传递给map函数之外的另一个函数？

1 个答案: