gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 07:25:52 28 4
gpt4 key购买 nike

基本上,我正在尝试克隆一个元素并在 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 Prop 并将其传递下去,还是有办法直接使用我缺少的 cloneElement 来完成?

最佳答案

您应该能够在这里使用纯 JavaScript 对象:

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

关于javascript - 在 React.cloneElement() 中设置 aria-label/aria-labelledby?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45330235/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com