docs: markdown eslint error fix (#40149)

README-ja_JP.md

@@ -79,6 +79,7 @@ yarn add antd
 ## 🔨 使い方
 
 ```jsx
+import React from 'react';
 import { Button, DatePicker } from 'antd';
 
 const App = () => (

README-pt_BR.md

@@ -79,6 +79,7 @@ yarn add antd
 ## 🔨 Uso
 
 ```jsx
+import React from 'react';
 import { Button, DatePicker } from 'antd';
 
 const App = () => (

README-sp_MX.md

@@ -79,6 +79,7 @@ yarn add antd
 ## 🔨 Uso
 
 ```jsx
+import React from 'react';
 import { Button, DatePicker } from 'antd';
 
 const App = () => (

README-uk_UA.md

@@ -79,6 +79,7 @@ yarn add antd
 ## 🔨 Використання
 
 ```jsx
+import React from 'react';
 import { Button, DatePicker } from 'antd';
 
 const App = () => (

README-zh_CN.md

@@ -79,6 +79,7 @@ yarn add antd
 ## 🔨 示例
 
 ```jsx
+import React from 'react';
 import { Button, DatePicker } from 'antd';
 
 const App = () => (

README.md

@@ -77,6 +77,7 @@ yarn add antd
 ## 🔨 Usage
 
 ```jsx
+import React from 'react';
 import { Button, DatePicker } from 'antd';
 
 const App = () => (

docs/react/migration-v5.en-US.md

@@ -203,14 +203,15 @@ const mapToken = defaultAlgorithm(defaultSeed);
 const v4Token = convertLegacyToken(mapToken);
 
 // Webpack Config
-{
-  loader: "less-loader",
+module.exports = {
+  // ... other config
+  loader: 'less-loader',
   options: {
     lessOptions: {
       modifyVars: v4Token,
     },
   },
-}
+};
 ```
 
 Ant then remove antd less reference in your less file:

docs/react/migration-v5.zh-CN.md

@@ -195,14 +195,15 @@ const mapToken = defaultAlgorithm(defaultSeed);
 const v4Token = convertLegacyToken(mapToken);
 
 // Webpack Config
-{
-  loader: "less-loader",
+module.exports = {
+  // ... other config
+  loader: 'less-loader',
   options: {
     lessOptions: {
       modifyVars: v4Token,
     },
   },
-}
+};
 ```
 
 同时移除对 antd less 文件的直接引用：

docs/react/practical-projects.en-US.md

@@ -69,6 +69,7 @@ Let's create a `ProductList` component that we can use in multiple places to sho
 Create `src/components/ProductList.tsx` by typing:
 
 ```tsx
+import React from 'react';
 import { Table, Popconfirm, Button } from 'antd';
 
 const ProductList: React.FC<{ products: { name: string }[]; onDelete: (id: string) => void }> = ({
@@ -82,7 +83,7 @@ const ProductList: React.FC<{ products: { name: string }[]; onDelete: (id: strin
     },
     {
       title: 'Actions',
-      render: (text, record) => {
+      render(text, record) {
         return (
           <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
             <Button>Delete</Button>
@@ -112,8 +113,8 @@ export function queryProductList() {
 }
 */
 // mock request service by setTimeout
-export function queryProductList() {
-  return new Promise(resolve => {
+export default function queryProductList() {
+  return new Promise((resolve) => {
     setTimeout(() => {
       resolve({
         data: [
@@ -129,6 +130,7 @@ export function queryProductList() {
 Then you need to create a new file `src/models/useProductList.ts`.
 
 ```tsx
+import { message } from 'antd';
 import { useRequest } from 'umi';
 import { queryProductList } from '@/services/product';
 
@@ -157,6 +159,7 @@ export default function useProductList(params: { pageSize: number; current: numb
 Edit `src/pages/products.tsx` and replace with the following:
 
 ```tsx
+import React from 'react';
 import { useModel } from 'umi';
 import ProductList from '@/components/ProductList';
 
@@ -164,7 +167,7 @@ const Products = () => {
   const { dataSource, reload, deleteProducts } = useModel('useProductList');
   return (
     <div>
-      <a onClick={() => reload()}>reload</a>
+      <a onClick={reload}>reload</a>
       <ProductList onDelete={deleteProducts} products={dataSource} />
     </div>
   );
@@ -188,6 +191,7 @@ And supports three modes of `side`, `mix`, and `top`, and it also has built-in m
 The method of use is also extremely simple, requiring only a few simple settings.
 
 ```tsx
+import React from 'react';
 import { Button } from 'antd';
 import ProLayout, { PageContainer } from '@ant-design/pro-layout';
 
@@ -201,7 +205,12 @@ export default (
           Main Operating
         </Button>,
       ]}
-      footer={[<Button>reset</Button>, <Button type="primary">submit</Button>]}
+      footer={[
+        <Button key={1}>reset</Button>,
+        <Button key={2} type="primary">
+          submit
+        </Button>,
+      ]}
     >
       {children}
     </PageContainer>
@@ -216,8 +225,9 @@ Click here [Quick Start](https://procomponents.ant.design/en-US/components/layou
 Many data in an admin page does not need to be shared across pages, and models are sometimes not needed.
 
 ```tsx
+import React, { useRef } from 'react';
 import ProTable from '@ant-design/pro-table';
-import { Popconfirm, Button } from 'antd';
+import { Popconfirm, Button, message } from 'antd';
 import { queryProductList } from '@/services/product';
 
 const Products = () => {
@@ -240,7 +250,7 @@ const Products = () => {
     },
     {
       title: 'Actions',
-      render: (text, record) => {
+      render(text, record) {
         return (
           <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
             <Button>Delete</Button>

docs/react/practical-projects.zh-CN.md

@@ -63,6 +63,7 @@ export default defineConfig({
 然后新建 `src/components/ProductList.tsx` 文件：
 
 ```tsx
+import React from 'react';
 import { Table, Popconfirm, Button } from 'antd';
 
 const ProductList: React.FC<{ products: { name: string }[]; onDelete: (id: string) => void }> = ({
@@ -76,7 +77,7 @@ const ProductList: React.FC<{ products: { name: string }[]; onDelete: (id: strin
     },
     {
       title: 'Actions',
-      render: (text, record) => {
+      render(text, record) {
         return (
           <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
             <Button>Delete</Button>
@@ -106,8 +107,8 @@ export function queryProductList() {
 }
 */
 // 先用 setTimeout 模拟一个请求，正常的写法如上所示
-export function queryProductList() {
-  return new Promise(resolve => {
+export default function queryProductList() {
+  return new Promise((resolve) => {
     setTimeout(() => {
       resolve({
         data: [
@@ -123,6 +124,7 @@ export function queryProductList() {
 然后新建文件 `src/models/useProductList.ts`。
 
 ```tsx
+import { message } from 'antd';
 import { useRequest } from 'umi';
 import { queryProductList } from '@/services/product';
 
@@ -151,6 +153,7 @@ export default function useProductList(params: { pageSize: number; current: numb
 编辑 `src/pages/products.tsx`，替换为以下内容：
 
 ```tsx
+import React from 'react';
 import { useModel } from 'umi';
 import ProductList from '@/components/ProductList';
 
@@ -158,7 +161,7 @@ const Products = () => {
   const { dataSource, reload, deleteProducts } = useModel('useProductList');
   return (
     <div>
-      <a onClick={() => reload()}>reload</a>
+      <a onClick={reload}>reload</a>
       <ProductList onDelete={deleteProducts} products={dataSource} />
     </div>
   );
@@ -188,6 +191,7 @@ $ yarn start
 使用方式也是极为简单，只需要进行几个简单的设置。
 
 ```tsx
+import React from 'react';
 import { Button } from 'antd';
 import ProLayout, { PageContainer } from '@ant-design/pro-layout';
 
@@ -201,7 +205,12 @@ export default (
           Main Operating
         </Button>,
       ]}
-      footer={[<Button>reset</Button>, <Button type="primary">submit</Button>]}
+      footer={[
+        <Button key={1}>reset</Button>,
+        <Button key={2} type="primary">
+          submit
+        </Button>,
+      ]}
     >
       {children}
     </PageContainer>
@@ -216,8 +225,9 @@ export default (
 一个中后台页面中很多数据都不需要跨页面共享，models 在一些时候也是不需要的。
 
 ```tsx
+import React, { useRef } from 'react';
 import ProTable from '@ant-design/pro-table';
-import { Popconfirm, Button } from 'antd';
+import { Popconfirm, Button, message } from 'antd';
 import { queryProductList } from '@/services/product';
 
 const Products = () => {
@@ -240,7 +250,7 @@ const Products = () => {
     },
     {
       title: 'Actions',
-      render: (text, record) => {
+      render(text, record) {
         return (
           <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
             <Button>Delete</Button>

docs/react/use-custom-date-library.en-US.md

@@ -98,7 +98,7 @@ We also provide another implementation, which we provide with `@ant-design/momen
 
 ```js
 // webpack-config.js
-import AntdMomentWebpackPlugin from '@ant-design/moment-webpack-plugin';
+const AntdMomentWebpackPlugin = require('@ant-design/moment-webpack-plugin');
 
 module.exports = {
   // ...

docs/react/use-custom-date-library.zh-CN.md

@@ -18,7 +18,7 @@ Ant Design 默认使用 [Day.js](https://day.js.org) 来处理时间日期问题
 编写如下代码:
 
 ```tsx
-import { Moment } from 'moment';
+import type { Moment } from 'moment';
 import momentGenerateConfig from 'rc-picker/es/generate/moment';
 import generatePicker from 'antd/es/date-picker/generatePicker';
 
@@ -34,16 +34,16 @@ export default DatePicker;
 编写如下代码:
 
 ```tsx
-import { Moment } from 'moment';
+import type { Moment } from 'moment';
 import * as React from 'react';
+import type { PickerTimeProps } from 'antd/es/date-picker/generatePicker';
 import DatePicker from './DatePicker';
-import { PickerTimeProps } from 'antd/es/date-picker/generatePicker';
 
 export interface TimePickerProps extends Omit<PickerTimeProps<Moment>, 'picker'> {}
 
-const TimePicker = React.forwardRef<any, TimePickerProps>((props, ref) => {
-  return <DatePicker {...props} picker="time" mode={undefined} ref={ref} />;
-});
+const TimePicker = React.forwardRef<any, TimePickerProps>((props, ref) => (
+  <DatePicker {...props} picker="time" mode={undefined} ref={ref} />
+));
 
 TimePicker.displayName = 'TimePicker';
 
@@ -57,7 +57,7 @@ export default TimePicker;
 编写如下代码:
 
 ```tsx
-import { Moment } from 'moment';
+import type { Moment } from 'moment';
 import momentGenerateConfig from 'rc-picker/es/generate/moment';
 import generateCalendar from 'antd/es/calendar/generateCalendar';
 
@@ -96,7 +96,7 @@ export { default as TimePicker } from './TimePicker';
 
 ```js
 // webpack-config.js
-import AntdMomentWebpackPlugin from '@ant-design/moment-webpack-plugin';
+const AntdMomentWebpackPlugin = require('@ant-design/moment-webpack-plugin');
 
 module.exports = {
   // ...

docs/react/use-in-typescript.en-US.md

@@ -43,7 +43,8 @@ $ yarn add antd
 Modify `src/App.tsx`, import Button component from `antd`.
 
 ```tsx
-import React, { FC } from 'react';
+import React from 'react';
+import type { FC } from 'react';
 import { Button } from 'antd';
 import 'antd/dist/reset.css';
 import './App.css';

docs/react/use-in-typescript.zh-CN.md

@@ -43,7 +43,8 @@ $ yarn add antd
 修改 `src/App.tsx`，引入 antd 的按钮组件。
 
 ```tsx
-import React, { FC } from 'react';
+import React from 'react';
+import type { FC } from 'react';
 import { Button } from 'antd';
 import 'antd/dist/reset.css';
 import './App.css';