如何在 React 中获取 aria-current答案

【问题标题】：How to get aria-current in React如何在 React 中获取 aria-current
【发布时间】：2022-01-17 06:32:22
【问题描述】：

在 NavLink 中有这个属性，aria-current，它被设置为值页面（aria-current="page" 用于选定的元素）。

有没有办法在 React 中访问它？为了更改未选择的其他链接的样式。

【问题讨论】：

有可能，通过使用 refs 和查询 DOM ......但你正在向后处理问题。无论您首先使用什么逻辑设置属性（通常从状态读取）都应该用于确定其他样式。
请看下面我的回答，你不应该为未选中的样式设置统一的样式，然后为选中的样式设置特定的样式吗？我认为这也是@Quentin 所暗示的……

标签： javascript html reactjs typescript wai-aria

【解决方案1】：

使用 CSS 可以更轻松地做到这一点吗？

.navLink:not([aria-current]) { color: red;}

【讨论】：

【解决方案2】：

见下文，这就是我使用 react router v6 处理样式化组件的方法。但是您可以按照相同的方式处理任何其他样式策略。

const StyledNavLink = styled(NavLink)`
  text-decoration: ${(props) => {
    console.log(props.style);
    return props.style ? (isActive) => (isActive ? "underline" : "none") : "none";
  }};
  &:hover {
    text-decoration: underline;
  }
 &[aria-current] {
    color: red;
  }
`;

或者，如下所示，可以检查活动类的存在

const StyledNavLink = styled(NavLink)`
    text-decoration: ${(props) => {
    console.log(props);
    return props.style ? (isActive) => (isActive ? "underline" : "none") : "none";
  }}; 
  &:hover {
    text-decoration: underline;
  }
 &[class*="active"] {
    color: red;
  }
`;

【讨论】：

【解决方案3】：

是的，您可以通过元素的 ref 访问它。例如：

const navRef = useRef(null);


...

return <nav ref={navRef}>{navRef.current.ariaCurrent}</nav>

请注意：以 aria 开头的属性仅用于可访问性目的，因此我不会依赖它们来设置组件的样式。

【讨论】：

ARIA 属性的一大优点是它们可以像任何其他属性一样使用并在 CSS 中引用。您可能需要基于 aria-current 的值或存在的不同样式。这是设置样式以帮助提高可访问性的好方法。

【解决方案4】：

是的，您可以使用 useRef 访问它，并为所欲为。

【讨论】：