在 React.cloneElement() 中设置 aria-label/aria-labelledby？

Question

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

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

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

aria-label="Next"显然由于连字符我不能这样做。

有什么建议么？不幸的是，当涉及到 aria 标签时，React 没有类似htmlFor( 代表) 的东西。html-for我应该在 Button 上放置一个 ariaLabel 道具并将其传递下来，还是有一种方法可以直接使用我缺少的 cloneElement 来完成此操作？

Answer 1

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

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