Javascript React：基于embla carousel React在样式化组件中的索引的数组的唯一id或类名_Javascript_Reactjs_Carousel_Gatsby

Javascript React：基于embla carousel React在样式化组件中的索引的数组的唯一id或类名

javascript reactjs gatsby

Javascript React：基于embla carousel React在样式化组件中的索引的数组的唯一id或类名,javascript,reactjs,carousel,gatsby,Javascript,Reactjs,Carousel,Gatsby,这是使用embla react旋转木马制作的旋转木马我想添加数组中每个对象的特定id或类名，因为我想为每个点导航添加某种文本我之所以使用样式化组件，是因为我不知道如何为sass添加所选的类。因此，我必须在每个类之间进行选择这就是我如何使它工作，但不是在样式化组件中 if (embla) { // console.log(embla.scrollSnapList) return embla.scrollSnapList().map((snap, index)

这是使用embla react旋转木马制作的旋转木马

我想添加数组中每个对象的特定id或类名，因为我想为每个点导航添加某种文本

我之所以使用样式化组件，是因为我不知道如何为sass添加所选的类。因此，我必须在每个类之间进行选择

这就是我如何使它工作，但不是在样式化组件中

    if (embla) {
    
    // console.log(embla.scrollSnapList)
    return embla.scrollSnapList().map((snap, index) => (
      

      // <ProgramTitle/>

            <button
                key={index}
                active={index === slide}
                aria-label={`Scroll to slide number ${index + 1}`}
                // aria-label={`Scroll to slide number ${index + 1}`}
                type="button"
        onClick={() => embla.scrollTo(index)}
        // className={`${button + index}`}
        className={`${button}`}
        id={`${button+"-"+index}`}
            >
        {/* <button className={hr}/> */}
      </button>
        ));
    }
    return "gagal";
}, [embla, slide]);

if（embla）{
//console.log（embla.scrollSnapList）
返回embla.scrollSnapList（）.map（（快照，索引）=>(
// 
embla.scrollTo（索引）}
//className={`${按钮+索引}`}
className={${button}}
id={`${button+“-“+index}}}
>
{/*  */}
));
}
返回“gagal”；
}，[embla，幻灯片]；

下面是我现在如何做，这是不可行的

{scrollSnaps.map((snap, index) => ( <DotButton selected={index === selectedIndex} onClick={() => scrollTo(index)} key={index} id={`${button+"-"+index}`} /> ))} </Dots> {scrollSnaps.map（（快照，索引）=>( 滚动到（索引）} 键={index} id={`${button+“-“+index}}} /> ))} 以及我的样式化组件

  const Dot = styled.button`
  background-color: transparent;
  cursor: pointer;
  position: relative;
  padding: 0;
  width: 3rem;
  height: 3rem;
  margin-right: 0.75rem;
  margin-left: 0.75rem;
  border: 0;
  display: flex;
  align-items: center;

  &::after {
    border-top: 1.2px solid #414242;
    opacity: .5;
    content: "";

    ${({ selected }) =>
      selected &&
      ` 
        border-top: 1.2px solid #414242;
        opacity: 1;
      `}
  }
`;
export const DotButton = ({ selected, onClick,  someId}) => (
  <Dot selected={selected} onClick={onClick} id={someId}/>
);

const Dot=styled.button`
背景色：透明；
光标：指针；
位置：相对位置；
填充：0；
宽度：3rem；
高度：3雷姆；
保证金权利：0.75雷姆；
左边距：0.75雷姆；
边界：0；
显示器：flex；
对齐项目：居中；
&：：之后{
边框顶部：1.2倍实心#414242；
不透明度：.5；
内容：“；
${（{selected}）=>
精选&&
` 
边框顶部：1.2倍实心#414242；
不透明度：1；
`}
}
`;
export const DotButton=（{selected，onClick，someId}）=>(
);

我不确定是否理解您的问题。是否要将动态

类名

id

添加到旋转木马项目中

然后，在循环中尝试以下操作：

      {scrollSnaps.map((snap, index) => (
        <DotButton
          selected={index === selectedIndex}
          onClick={() => scrollTo(index)}
          key={index}
          id={`${button}-${index}`}
        />
      ))}

{scrollSnaps.map（（快照，索引）=>(
滚动到（索引）}
键={index}
id={${button}-${index}}
/>
))}

如果定义了变量

按钮

，则上述示例将起作用。您可能希望尝试更具动态性的操作，如：

id={`element-${index}}

看看你的模板文字。大括号用于在背景标记中声明变量：

{`${这是一个变量}-这是一个字符串`}