javascript - 在 React 中切换 aria-pressed Angular 色以实现 Web 可访问性的最有效方法

Question

我有一堆用作按钮的 div 和 span，需要在“true”和“false”的 aria-pressed 状态之间切换。当然，可以使用这个 aria-pressed={this.state.pressed} 来做到这一点，但这需要我为每个按钮(有很多)设置 aria 状态。

我的替代解决方案是使用三元并有条件地呈现不同的 div。例如，

{ this.state.buttonChange? <div onClick=(this.buttonChange} aria-pressed="true></div> : <div onClick=(this.buttonChange} aria-pressed="false"></div>}

但这会产生大量重复代码，而且效率可能低于仅拥有一堆不同的 aria 状态。

在不使用 native html 按钮元素的情况下，在 React 中处理此问题的最有效方法是什么？

Answer 1

我认为一种方法是使用三元运算符将 div 元素分配给变量以实现可重用性

let button = <div onClick=(this.buttonChange} aria-pressed={this.state.pressed}></div>;
{ this.state.buttonChange? {button} : {button}}

或者，如果您根据动态数据动态渲染按钮，那么您可以将所有 div 元素推送到一个数组并进行渲染。