ant.design-pro使用useModel傳遞全域性資料
阿新 • • 發佈：2021-08-30
antpro的umi內建的useModel也可以實現全域性資料流
示例圖:三個元件的數量可以共享 使用方法 在src目錄下models資料夾,新建一個檔案,檔名就是引入的資料物件
1. 2. 完整程式碼 /src/models/product.ts
示例圖:三個元件的數量可以共享 使用方法 在src目錄下models資料夾,新建一個檔案,檔名就是引入的資料物件
1. 2. 完整程式碼 /src/models/product.ts
import { useState, useCallback } from 'react'
export default () => {
const [count, setCount] = useState(0)
// 增加數量
const addCount = useCallback((val: number = 1) => {
setCount((pre)
元件中使用
元件1
/src/pages/components1
import React from 'react'; import { useModel } from元件2 /src/pages/components2'umi'; import { Descriptions, Button } from 'antd'; export default () => { const { count, addCount, substractCount } = useModel('product', model => ( { count: model.count, addCount: model.addCount, substractCount: model.substractCount, } )) return <> <h2>頁面一</h2> <Descriptions title="商品資訊"> <Descriptions.Item label="名稱">T-shirt</Descriptions.Item> <Descriptions.Item label="價格">799</Descriptions.Item> <Descriptions.Item label="數量">{count}</Descriptions.Item> </Descriptions> <h2>修改資料</h2> <Button type="primary" onClick={() => addCount()} style={{marginRight: '10px'}}> 數量+1 </Button> <Button type="primary" onClick={() => substractCount()}> 數量-1 </Button> </> };
import React from 'react'; import { useModel } from 'umi'; import { Descriptions, Button } from 'antd'; export default () => { const { count, addCount, substractCount } = useModel('product', model => ( { count: model.count, addCount: model.addCount, substractCount: model.substractCount, } )) return <> <h2>頁面二</h2> <Descriptions title="商品資訊"> <Descriptions.Item label="名稱">T-shirt</Descriptions.Item> <Descriptions.Item label="價格">799</Descriptions.Item> <Descriptions.Item label="數量">{count}</Descriptions.Item> </Descriptions> <h2>修改資料</h2> <Button type="primary" onClick={() => {addCount(2)}} style={{marginRight: '10px'}}> 數量+2 </Button> <Button type="primary" onClick={() => {substractCount(2)}}> 數量-2 </Button> </> };