react無狀態組件方式實現無需打包的npm包

時間 2019-11-17

標籤 react 狀態組件方式實現無需打包 npm 欄目 React 简体版

原文原文鏈接

實現目標

以react無狀態組件方式實現一個消息彈發佈到npm上使用node

使用方式

在react中引入包react

import rcAlert from 'rc-alert';

message.success(content, [duration], onClose)
message.error(content, [duration], onClose)
message.info(content, [duration], onClose)
message.warning(content, [duration], onClose)
message.warn(content, [duration], onClose)
複製代碼

參數說明

參數	說明	類型	默認值
content	提示內容	string/ReactNode	無
duration	自動關閉的延時，單位秒	number	3秒
onClose	關閉時觸發的回調函數	Function	無

具體實現

1. 實現方式:

第一次彈出消息時給的底部插入一個div,以後每次改變div裏面的內容便可git

2. 外層框架:

rcAlertMessage.newrcAlert()是生成消息框的函數，經過回調函數返回instance來判斷是否已經生成外層框架github

let rcAlertInstance = 0;
const className = 'myCat-rcAlert';
function outerFrame(callback) {
    if (rcAlertInstance === 0) {
        const div = document.createElement('div');
        div.id = className;
        document.body.appendChild(div);
        rcAlertMessage.newrcAlert(className, function (instance) {
            callback(instance);
            rcAlertInstance = instance;
        })
    } else {
        callback(rcAlertInstance);
    }
}
複製代碼

newrcAlert()函數:npm

App.newrcAlert = function (className, callback) {
    function ref(app) {
        callback({
            notice(noticeProps) {
                app.add(noticeProps);
                app.onRemove(noticeProps);
            },
        })

    }
    let apps=new App();
    let Apps=apps.render();
    React.createElement('div', {ref: ref(apps)}, Apps,)
};

複製代碼

3. 生成內容方式:

經過React.createElement()來建立函數，並以高階函數的方式將內容建立以參數的方式傳遞給outerFram(callback)，以後經過調取參數callback來實現內容的生成promise

outerFrame(function (instance) {
        instance.notice({
            key: key,
            duration: duration,
            style: {},
            content: React.createElement(
                'div',
                {className: 'rcAlert-node-content'},
                React.createElement(
                    'svg',
                    {className: `icon rcAlert-icon ${iconClass}`},
                    React.createElement(
                        'use', {xlinkHref: iconType}
                    ),
                ),
                React.createElement(
                    'span',
                    null,
                    content
                )
            ),
            onClose: callback
        })
    }
複製代碼

4. 生成內容:

以構造函數的方式實現元素的添加、停留時長、移除、和移除後的回調bash

function App() {
    this.state={
        nodes : []
    };
    this.setState=function(state, callback){
        this.state.nodes=state.nodes;
        this.render();
        if(callback){
            callback()
        }
    };
    this.add = function (node) {
        const nodes =this.state.nodes;
        node.class = 'move-up-enter';
        nodes.push(node);
        this.setState({
            nodes
        })
    };
    this.onRemove =function (node){
        const self=this;
        setTimeout(function(){
            self.remove(node.key);
        }, node.duration * 1000);
    };
    this.remove =function (key) {
        const self=this;
        const nodeStart = self.state.nodes;
        const len = nodeStart.length;
        let onClose;
        for (let i = 0; i < len; i++) {
            if (nodeStart[i].key === key) {
                nodeStart[i].class = 'move-up-leave';
                onClose = nodeStart[i].onClose;
                break;
            }
        }
        self.setState({
            nodes: nodeStart
        }, function() {
            setTimeout(function() {
                self.onClose(onClose);
                const nodes = self.state.nodes.filter(
                    function (item) {
                        return item.key !== key;
                    });
                self.setState({
                    nodes
                });
            }, 300);
        });
    };
    this.onClose=function (onClose) {
        return onClose();
    };

    this.render=function () {
        const nodes =this.state.nodes;
        ReactDOM.render(
            React.createElement(
                'div',
                null,
                nodes.map((node) => {
                    return React.createElement(
                        'div',
                        {key: node.key, className: `rcAlert-li ${node.class}`},
                        React.createElement(
                            'div',
                            {className: 'rcAlert-node'},
                            node.content,
                        )
                    )
                })
            ), document.getElementById('myCat-rcAlert'));
    }
}
複製代碼

5. 回調函數:

判斷是否有寫入回調函數，並經過Promise的方式返回給原函數app

function node(content) {
    let duration = arguments.length > 1 && !isNaN(arguments[1]) ? arguments[1] : 3;
    let type = arguments[2];
    let onClose = arguments[3];
    let iconType = {
        info: '#icon-info',
        success: '#icon-chenggong1',
        error: '#icon-error',
        warning: '#icon-warning',
    }[type];
    let iconClass = {
        info: 'icon-info',
        success: 'icon-success',
        error: 'icon-error',
        warning: 'icon-warning',
    }[type];
    key++;

    let closePromise = new Promise(function (resolve) {
        let callback = function callback() {
            if (typeof onClose === 'function') {
                onClose();
            }

            return resolve(true);
        };
        outerFrame(function (instance) {
                instance.notice({
                    key: key,
                    duration: duration,
                    style: {},
                    content: React.createElement(
                        'div',
                        {className: 'rcAlert-node-content'},
                        React.createElement(
                            'svg',
                            {className: `icon rcAlert-icon ${iconClass}`},
                            React.createElement(
                                'use', {xlinkHref: iconType}
                            ),
                        ),
                        React.createElement(
                            'span',
                            null,
                            content
                        )
                    ),
                    onClose: callback
                })
            }
        );
    });
    let result = function result() {
        if (rcAlertInstance) {
            rcAlertInstance.removeNotice(target);
        }
    };

    result.then = function (filled, rejected) {
        return closePromise.then(filled, rejected);
    };

    result.promise = closePromise;
    return result;
}

const rcAlert = {
    info: function info(content, duration, onClose) {
        return node(content, duration, 'info', onClose);
    },
    success: function success(content, duration, onClose) {
        return node(content, duration, 'success', onClose);
    },
    error: function error(content, duration, onClose) {
        return node(content, duration, 'error', onClose);
    },
    warn: function warn(content, duration, onClose) {
        return node(content, duration, 'warning', onClose);
    },
    warning: function warning(content, duration, onClose) {
        return node(content, duration, 'warning', onClose);
    },
};
複製代碼