---
url: /docs/guide/usage/linter/rules/jsx_a11y/anchor-has-content.md
---

### 它的作用

强制要求锚点具有内容，并且该内容对屏幕阅读器可访问。
可访问意味着它没有使用 `aria-hidden` 属性隐藏。

或者，你也可以使用 `title` 属性或 `aria-label` 属性。

直接作为 JSX 属性值传递给自定义组件的锚点会被忽略，因为接收组件可能会提供其内容。

### 为什么这是不好的做法？

没有内容的锚点元素可能会让依赖屏幕阅读器理解内容的用户感到困惑。

### 示例

以下是此规则的**正确**代码示例：

```jsx
<a>锚点内容！</a>
<a><TextWrapper /></a>
<a dangerouslySetInnerHTML={{ __html: 'foo' }} />
<a title='foo' />
<a aria-label='foo' />
<Button render={<a href='/home' />}>Home</Button>
```

以下是此规则的**错误**代码示例：

```jsx
<a />
<a><TextWrapper aria-hidden /></a>
```

## 配置

此规则接受一个具有以下属性的配置对象：

### components

类型：`string[]`

默认值：`[]`

要作为锚点元素处理的其他自定义组件名称。

## 如何使用

## 版本

此规则在 v0.0.18 中添加。

## 参考资料