react中model常用方法

本文将详细探讨React中Modal组件的各种常见使用方法,包括打开、关闭、设置属性等操作,帮助开发者更好地理解和应用。
摘要由CSDN通过智能技术生成

react中model 、常用方法


    // 查询
    *fetch(
      {
        payload: { config, pageIndex = 1, pageSize, values, sortData },
      },
      { call, put, select }
    ) {
      // 查询条件
      const { queryValues, sortValues, data } = yield select(state => state[config.model]);
      let queryTemp;
      if (values || values === '') {
        queryTemp = values;
      } else {
        queryTemp = queryValues;
      }
      let sortTemp;
      if (sortData || sortData === '') {
        sortTemp = sortData;
      } else {
        sortTemp = sortValues;
      }
      // 页码信息
      let size;
      if (pageSize) {
        size = pageSize;
      } else if (data.pagination.pageSize) {
        size = data.pagination.pageSize;
      } else {
        size = PAGESIZE;
      }

      yield put({ type: 'save', payload: { loading: true } });
      const response = yield call(queryCommon, config, pageIndex, size, queryTemp, sortTemp);
      yield put({
        type: 'save',
        payload: {
          data: {
            list: response ? response.rows : [],
            pagination: {
              total: response ? response.total : 0,
              pageIndex,
              pageSize: size,
            },
          },
          queryValues: queryTemp,
          sortValues: sortTemp,
        },
      });
      yield put({ type: 'save', payload: { loading: false } });
    },

    *add(
      {
        payload: { params, config },
        callback,
      },
      { call, put }
    ) {
      yield put({ type: 'save', payload: { loading: true } });
      const response = yield call(addCommon, params, config);
      yield put({ type: 'save', payload: { loading: false } });
      yield put({ type: 'fetch', payload: { config } });
      if (callback) callback(response);
    },

    *update(
      {
        payload: { params, config },
        callback,
      },
      {
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React,useModel是一种常用的自定义钩子,它可以让我们更方便地管理应用程序的状态。useModel一般用于管理全局状态,例如用户登录状态、主题等。 它的实现原理是使用React的Context API来创建一个全局的状态管理器,并通过useContext钩子来访问这个状态管理器。使用useModel钩子可以让我们更方便地对这个状态管理器进行操作。 下面是一个简单的useModel例子: ``` import React, { createContext, useContext, useState } from 'react'; const ModelContext = createContext(); const ModelProvider = ({ children }) => { const [count, setCount] = useState(0); const increment = () => setCount(count + 1); const decrement = () => setCount(count - 1); const value = { count, increment, decrement, }; return ( <ModelContext.Provider value={value}>{children}</ModelContext.Provider> ); }; const useModel = () => useContext(ModelContext); export { ModelProvider, useModel }; ``` 我们首先创建了一个ModelContext,用于存储全局状态。然后通过ModelProvider组件来包裹整个应用程序,并将状态和方法传递给子组件。最后,我们通过useModel钩子来访问这些状态和方法。 在组件使用useModel钩子非常简单: ``` import { useModel } from './useModel'; const Counter = () => { const { count, increment, decrement } = useModel(); return ( <div> <p>Count: {count}</p> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> </div> ); }; ``` 在这个例子,我们可以轻松地访问全局状态,并对其进行操作,而无需在组件之间传递props。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值