React函数式组件与类组件通用写法

最新推荐文章于 2023-04-25 22:20:34 发布

怕冷的火焰（~杰）

最新推荐文章于 2023-04-25 22:20:34 发布

阅读量203

点赞数

分类专栏： React 文章标签： react.js

本文链接：https://blog.csdn.net/weixin_50236973/article/details/128816977

版权

React 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

// 函数式组件

// 函数式组件
import React, { useEffect, useReducer, useState } from 'react';
import { observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Input, Button, InputNumber, Modal } from 'antd';
import style from './style.less';

const initState = {
    companyKey: '',
};
const reducer = (state, action) => {
    return { ...state, ...action.params };
};

export default observer(props => {
    const [queryParams, dispatch] = useReducer(reducer, initState);
    const handleChange = (val, key) => {
        dispatch({ params: { [key]: val } });
    };
    const handleCancelAuthorization = () => { };
    const handleSaveAuthorization = async () => { };

    return (
        <Modal
            width={590}
            title={`${props.type === 'add' ? '添加授权' : '编辑授权'}`}
            visible={true}
            maskClosable={false}
            onOk={handleSaveAuthorization}
            onCancel={handleCancelAuthorization}
            footer={[
                <Button className={style.query_btn_bg} key="submit" type="primary" loading={loading} onClick={handleSaveAuthorization}>
                    保存
                </Button>,
                <Button className={style.cancel_btn} key="back" onClick={handleCancelAuthorization}>
                    取消
                </Button>
            ]}>
            <div className={style.modal_c}>
                <Input value={queryParams.companyKey} onChange={e => handleChange(e.target.value, 'companyKey')} />
            </div>
        </Modal>
    );
});

// 类组件

// 类组件
import React, {Component} from 'react';
import {observer} from 'mobx-react';
import {Table, Input, Button, InputNumber, Select, Popconfirm, Modal} from 'antd';
import noticeStore from '@stores/Notice';
import {toJS} from 'mobx';
import {filtergQparams} from '@lib';
import style from './style.less';

@observer
export default class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    async componentDidMount() {}

    render() {

        return (
            <div className={style.page_box}>
                111111
            </div>
        );
    }
}