mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

docs: fix code examples and statement expressions (#48558)

Browse Source 
* doc: fix code examples and statement expressions

* Update docs/react/use-with-umi.en-US.md

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: BiggerRain <15911122312@163.COM>

* Update docs/react/use-with-umi.zh-CN.md

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: BiggerRain <15911122312@163.COM>

---------

Signed-off-by: BiggerRain <15911122312@163.COM>
Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
BiggerRain 2024-04-23 10:17:54 +08:00 committed by GitHub
parent ce176a8cd2
commit f497d93315
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/react/use-with-umi.en-US.md
View File

@ -133,12 +133,18 @@ Create a new `src/components/ProductList.tsx` file with the following code.
```tsx
import React from 'react';
import { Button, Popconfirm, Table } from 'antd';
import type { TableProps } from 'antd';
const ProductList: React.FC<{ products: { name: string }[]; onDelete: (id: string) => void }> = ({
interface DataType {
id: string;
name: string;
}
const ProductList: React.FC<{ products: DataType[]; onDelete: (id: string) => void }> = ({
onDelete,
products,
}) => {
const columns = [
const columns: TableProps<DataType>['columns'] = [
{
title: 'Name',
dataIndex: 'name',
@ -164,7 +170,7 @@ export default ProductList;
Assuming we have agreed on an API interface with the backend developers, we can now use Mock data to locally mock up the data that the API should return, so that front-end and back-end development can proceed simultaneously without the front-end work being blocked because the back-end API is still being developed. Umi provides an out-of-the-box [Mock function](https://umijs.org/docs/guides/mock) that allows you to set up Mock data in a convenient and easy way.
Create a `mock` directory and add a new `products.ts` file to this directory with the following code.
Create a new `mock/products.ts` file in the root directory with the following code.
```ts
import { defineMock } from 'umi';

12
docs/react/use-with-umi.zh-CN.md
View File

@ -133,12 +133,18 @@ export default defineConfig({
```tsx
import React from 'react';
import { Button, Popconfirm, Table } from 'antd';
import type { TableProps } from 'antd';
const ProductList: React.FC<{ products: { name: string }[]; onDelete: (id: string) => void }> = ({
interface DataType {
id: string;
name: string;
}
const ProductList: React.FC<{ products: DataType[]; onDelete: (id: string) => void }> = ({
onDelete,
products,
}) => {
const columns = [
const columns: TableProps<DataType>['columns'] = [
{
title: 'Name',
dataIndex: 'name',
@ -164,7 +170,7 @@ export default ProductList;
假设我们已经和后端约定好了 API 接口，那现在就可以使用 Mock 数据来在本地模拟出 API 应该返回的数据，这样一来前后端开发就可以同时进行，不会因为后端 API 还在开发而导致前端的工作被阻塞。Umi 提供了开箱即用的 [Mock 功能](https://umijs.org/docs/guides/mock)，能够用方便简单的方式来完成 Mock 数据的设置。
创建 `mock` 目录，并在此目录下新增 `products.ts` 文件，内容如下。
在根目录下新建 `mock/products.ts` 文件，内容如下。
```ts
import { defineMock } from 'umi';