Javascript 在React.cloneElement（）中设置aria label/aria labelledby？

基本上，我正在尝试克隆一个元素，并在React.cloneElement中更改其aria标签。我有一个组件ButtonRowns，它创建了两个按钮组件，一个带有指向左侧的箭头图标，另一个指向右侧。我希望能够以编程方式更改aria标签，但连字符会抛出一个错误

下面是一些代码，显示我正在尝试执行的操作：

const ButtonArrows = ({leftArrow, rightArrow, ...props})
  const prevButton = (
    <Button
      aria-label="Previous",
      icon={leftArrow}
    />
  );

  const nextButton = React.cloneElement(prevButton, {
    //this is where the problem is:
    aria-label="Next",
    icon={rightArrow}
  });

  return(<div {...props}>{prevButton}{nextButton}</div>);
}

constbuttonnerrows=（{leftArrow，rightArrow，…props}）
const prevButton=(
);
const nextButton=React.cloneElement（prevButton{
//这就是问题所在：
aria label=“下一步”，
图标={rightArrow}
});
返回（{prevButton}{nextButton}）；
}

显然，由于连字符，我无法执行

aria label=“Next”

---

有什么建议吗？React不幸地没有类似于

htmlFor

（代表

htmlFor

）的内容，当它出现在aria标签上时。我应该在按钮上放置一个ariaLabel道具并将其传递下去，还是有一种直接使用我缺少的cloneElement的方法？

您应该能够在此处使用普通JavaScript对象：

const nextButton = React.cloneElement(prevButton, {
  'aria-label': 'Next',
  icon: rightArrow
});

constbuttonnerrows=（{leftArrow，rightArrow，…props}）
const prevButton=(
);
const nextButton=React.cloneElement（prevButton{
//这就是问题所在：
ariaLabelledby=“下一步”，
图标={rightArrow}
});
返回（{prevButton}{nextButton}）；
}

---

将aria标签更改为ariaLabel

完美！我陷入了思考React如何使用htmlFor和className的过程中，我完全想过头了。@kbuechner很高兴我能帮上忙！如果我的答案解决了您的问题，请单击大复选框将其作为答案。如果这与带有连字符的其他属性类似，“L”是否应该大写，如ariaLabel和ariaLabelledby？

const ButtonArrows = ({leftArrow, rightArrow, ...props})
  const prevButton = (
    <Button
      ariaLabel="Previous",
      icon={leftArrow}
    />
  );

  const nextButton = React.cloneElement(prevButton, {
    //this is where the problem is:
    ariaLabelledby="Next",
    icon={rightArrow}
  });

  return(<div {...props}>{prevButton}{nextButton}</div>);
}