@42.nl/ui 中文文档教程

Question

42.nl 产品中常用的组件。

---

Migration to React Query

在 3.17 版本中，我们添加了对 React Query 的支持。 我们仍然支持 React Async，但是库还没有更新 快 2 年了，React Query 提供了更多我们想要使用的功能。

在您的项目中用 React Query 替换 React Async 只需几个简单的步骤即可完成：

1. Install React Query by running npm i -S react-query
2. In your index.tsx file, add the following: ts const queryClient = new QueryClient({ defaultOptions: { queries: { // These options will make React Query work similar to React Async retry: false, refetchOnWindowFocus: false, cacheTime: 0 } } });
3. In your index.tsx file, wrap the <App/> in the provider: tsx <QueryClientProvider client={queryClient}> <App/> </QueryClientProvider>
4. Search for all occurrences of useAsync(...) in your project and replace them with useQuery(...).

useQuery() 要求第一个参数是键。 您必须为每个 useQuery 提供一个唯一的键。 如果你用过 useAsync 中的 watch 属性，您必须将您监视的属性添加到键中。 密钥被允许是一个 数组，所以像 useQuery(['users', page, sort], loadUsers) 这样的东西会在页面或排序改变后重新获取。 你是 允许将整个对象传递给数组，因此 useQuery(['users', queryParams], loadUsers) 也可以工作。

有多种方法可以将参数传递给回调。 默认情况下，包含键的对象被传递给 打回来。 回调看起来像这样：

import { QueryFunction } from 'react-query';

...

function loadUsers({ queryKey }: QueryFunctionContext) {
    // The first item in the array is ignored as it contains the unique key
    const [ , page, sort ] = queryKey;
    ...
}

...

如果您自己指定参数，则必须使用这样的闭包：

const users = useQuery(['users', page, sort], () => loadUsers({ page, sort }));

不要忘记将所有参数也添加到键中，否则当其中一个参数更改时，查询将不会 被调用，结果不会更新。

有关如何使用 React Query 的更多详细信息，我们建议您参阅他们的文档。

---

Installation

Setup

# with yarn
yarn add @42.nl/ui

# with npm
npm i @42.nl/ui --save

Contributing

详细步骤可以在 https://42bv.github.io/ui 找到。

Setup

1. Ensure you have Node.js 10.13+ installed.
2. Git clone the repository.
3. From the root of the repository, run npm i to install the dependencies required for development.

Testing

首先按照上面的构建说明进行操作。 然后运行 ​​linters 和测试，使用：

npm test

或者单独运行它们，使用：

npm run lint

npm run test:ts

npm run test:coverage

Development

我们使用 Storybook 测试成分 在开发过程中。 要启动本地故事书，请从根目录运行 npm start。

还要确保测试覆盖率是 100%。 要在每次更改时自动运行测试，请从根目录运行 npm run test:watch。

如果所有测试都通过，则测试覆盖率为 100%，您想要测试中的更改 您选择的项目，您可以创建一个本地版本。

Local release

为了防止单个功能的多个预发布版本，我们建议使用 Verdaccio。 Verdaccio 使您能够旋转起来 一个本地 NPM 注册表，它反过来允许我们发布多个版本用于测试目的，而不会污染 NPM 中的版本。

我们推荐使用 Docker 方法而不是本地安装 佛达乔。 如果你不想使用 Docker，请参考 Verdaccio 文档。

要发布到 Verdaccio 注册表运行 npm run dev:publish 这个 将启动 Verdaccio 并发布。

您可以在此处查看 Verdaccio：http://localhost:4873/ 它应该在之后 成功的开发发布在此处显示包。

要验证版本，请在您选择的项目中从 Verdaccio 注册表安装 @42.nl/ui 通过运行：npm install --registry http://localhost:4873。

现在您可以在本地测试包而无需发布到实际 NPM 注册表。