# @comms-id/australian-address-autocomplete-react 中文文档

规范地址：https://npmcn.com/package/%40comms-id/australian-address-autocomplete-react/

版本：0\.2\.3
npm 元数据更新时间：2026-10-31T19:46:51.488Z
中文译文更新时间：2026-10-31T20:38:50.226Z
软件包许可：SEE LICENSE IN LICENSE

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40comms-id/australian-address-autocomplete-react
原文对照：https://npmcn.com/package/%40comms-id/australian-address-autocomplete-react/?lang=original
项目主页：https://comms.id/
源码仓库：https://github.com/comms-id/platform

弃用说明：Removed\. Comms\.ID products are served live, nothing to install: https://cdn\.comms\.id/australian-address-autocomplete/latest\.js

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：18.3 kB，11 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=18
- 首次发布：2026-10-21T22:42:11.789Z
- 最新版本发布：2026-10-21T22:43:49.112Z
- 已发布版本数：2（近 12 个月 2 个）

## 中文简介

用于通信的React钩子和组件。ID地址自动完成：可访问的，没有布局移位，与数据属性

## 安装

```sh
npm install @comms-id/australian-address-autocomplete-react
```

也可以使用：`pnpm add @comms-id/australian-address-autocomplete-react`、`yarn add @comms-id/australian-address-autocomplete-react`、`bun add @comms-id/australian-address-autocomplete-react`

## README

# @comms-id / australian-address-autocomplete-react

一个React钩子和一个完成的Comms组件。ID地址自动填写。易于访问，没有布局变化，始终显示数据属性。React 18或更高版本；这取决于 `@comms-id/australian-address-autocomplete` 没有别的了。

```tsx
import { createAustralianAddressAutocompleteBrowserClient } from "@comms-id/australian-address-autocomplete/browser";
import { AustralianAddressAutocomplete } from "@comms-id/australian-address-autocomplete-react";

const client = createAustralianAddressAutocompleteBrowserClient({ relayUrl: "/api/comms-id/address" });

export const Checkout = () => (
  <AustralianAddressAutocomplete
    client={client}
    label="Delivery address"
    onSelect={(address, timing) => console.log(address.displayAddress, `${timing.ms} ms`)}
  />
);
```

`relayUrl` 您自己的服务器路由，设置与 `@comms-id/relay`您的服务器将调用签名为您注册的应用程序，因此浏览器不持有凭据。

## 您自己的标记： `useAustralianAddressAutocomplete`

```tsx
const address = useAustralianAddressAutocomplete({ client, onSelect });
return (
  <>
    <input {...address.getInputProps()} />
    <ul {...address.getListboxProps("Matches")} hidden={!address.state.open}>
      {address.state.suggestions.map((s, i) => (
        <li key={s.id} {...address.getOptionProps(i)}>{s.label}</li>
      ))}
    </ul>
    <p {...address.getStatusProps()}>{address.state.announcement}</p>
  </>
);
```

道具获取者携带WAI-ARIA组合框合约：角色， `aria-expanded`， `aria-controls`， `aria-activedescendant`，键处理（箭头，Enter, Escape, Tab）和一个礼貌的生活区域。当你使用钩子时，自己渲染属性： `import { ATTRIBUTION } from "@comms-id/australian-address-autocomplete-react"`.

## 组件

道具: `client` 和 `label` (需要), `onSelect`， `minChars` (3), `debounceMs` (400), `limit` (8), `within`， `idPrefix`， `name`， `placeholder`， `disabled`， `required`， `className`， `listLabel`， `showTiming` (真正的), `renderOption`.

使用自定义属性对其进行样式化 `--comms-id-text`， `--comms-id-surface`， `--comms-id-border`， `--comms-id-active`， `--comms-id-radius` 或者是 `comms-id-australian-address-autocomplete__*` 类名。它不需要样式表。

-   列表在输入的下面浮动；打开它什么也不动。状态行有预留高度。
-   失败的查找说明了原因(`Address search is unavailable`)，并提供“再试一次”；它永远不会显示为“不匹配”。
-   它在服务器上以相同的结构呈现，并在StrictMode下工作。

## 数据属性

地址数据为G-NAF。组件总是显示所需的措辞。不要隐藏它。

`LICENSE` 是消费者客户牌照。

## 常见问题

### @comms-id/australian-address-autocomplete-react 是什么？

用于通信的React钩子和组件。ID地址自动完成：可访问的，没有布局移位，与数据属性注意：该包已被作者标记为弃用——Removed\. Comms\.ID products are served live, nothing to install: https://cdn\.comms\.id/australian-address-autocomplete/latest\.js

### 如何安装 @comms-id/australian-address-autocomplete-react？

在项目目录运行 npm install @comms-id/australian-address-autocomplete-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @comms-id/australian-address-autocomplete-react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @comms-id/australian-address-autocomplete-react 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @comms-id/australian-address-autocomplete-react 可以商用吗？

@comms-id/australian-address-autocomplete-react 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @comms-id/australian-address-autocomplete-react 还在维护吗？

最新版本 0\.2\.3 发布于 2026/10/22（12 天前）；至今共发布 2 个版本，其中过去 12 个月发布了 2 个；首次发布于 2026/10/22。作者已将其标记为弃用，新项目建议寻找替代方案。