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

Question

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

下面是一些代码显示我想要做的事：

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"的连字符。

有什么建议吗？ React不幸的是没有任何东西像htmlFor（代表html-for），当它咏叹调标签。我应该在Button上放置一个ariaLabel道具并传递它，还是有办法直接使用我缺少的cloneElement？

Answer 1

您应该能够使用普通的JavaScript对象的位置：

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