react-dnd问题

Question

这个导出是什么意思

export default DragDropContext(HTML5Backend)(
    //这个connect函数起什么作用，为什么可以把APP写在后面
    connect(mapStateToProps, mapDispatchToProps, null, { pure: false })(App)
);

import * as React from 'react';
import { Route } from 'react-router-dom';
import { connect } from 'react-redux';
import { IRootState } from 'modules';
import { IntlProvider } from 'react-intl';
import { checkOnline, setLoading } from 'modules/engine/actions';
import platform from 'lib/platform';
import * as classnames from 'classnames';

import { AnimatedSwitch } from 'components/Animation';
import Splash from 'components/Splash';
import Main from 'containers/Main';
import Auth from 'containers/Auth';

import HTML5Backend from 'react-dnd-html5-backend';
import { DragDropContext } from 'react-dnd';
import InitHook from 'containers/App/InitHook';
import { switchWindow } from 'modules/gui/actions';
import ModalProvider from 'containers/Modal/ModalProvider';

interface IAppProps {
    locale: string;
    isAuthenticated: boolean;
    isCollapsed: boolean;
    isLoading: boolean;
    isConnected: boolean;
    isConnecting: boolean;
    localeMessages: { [key: string]: string };
    setLoading?: typeof setLoading;
    checkOnline?: typeof checkOnline.started;
    switchWindow?: typeof switchWindow.started;
}

class App extends React.Component<IAppProps> {
    componentDidMount() {
        if (!this.props.isConnecting && this.props.isLoading) {
            this.props.checkOnline(null);
        }
    }

    componentWillReceiveProps(props: IAppProps) {
        if (this.props.isAuthenticated !== props.isAuthenticated) {
            props.switchWindow(props.isAuthenticated ? 'main' : 'general');
        }

        if (null === this.props.isConnected && null !== props.isConnected) {
            if (props.isConnected) {
                props.setLoading(false);
            }
            else {
                this.props.setLoading(false);
            }
        }

        if (this.props.isAuthenticated !== props.isAuthenticated) {
            this.props.setLoading(false);
        }
    }

    render() {
        const classes = classnames({
            'wrapper': true,
            'layout-fixed': true,
            'aside-collapsed': this.props.isCollapsed,
            'aside-toggled': !this.props.isCollapsed,
            'platform-desktop': platform.select({ desktop: true }),
            'platform-web': platform.select({ web: true }),
        });

        return (
            <IntlProvider locale={this.props.locale} defaultLocale="en-US" messages={this.props.localeMessages}>
                <div className={classes}>
                    <InitHook />
                    <ModalProvider />
                    <AnimatedSwitch animation={AnimatedSwitch.animations.fade()}>
                        {this.props.isLoading && (
                            <Route path="/" component={Splash} />
                        )}
                        {!this.props.isAuthenticated && (
                            <Route path="/" component={Auth} />
                        )}
                        <Route path="/" component={Main} />
                    </AnimatedSwitch>
                </div>
            </IntlProvider>
        );
    }
}

const mapStateToProps = (state: IRootState) => ({
    locale: state.storage.locale,
    localeMessages: state.engine.localeMessages,
    isAuthenticated: state.auth.isAuthenticated,
    isCollapsed: state.engine.isCollapsed,
    isLoading: state.engine.isLoading,
    isConnected: state.engine.isConnected,
    isConnecting: state.engine.isConnecting
});

const mapDispatchToProps = {
    setLoading,
    checkOnline: checkOnline.started,
    switchWindow: switchWindow.started
};

// export default connect(mapStateToProps, mapDispatchToProps, null, { pure: false })(App);
//这个导出是什么意思
export default DragDropContext(HTML5Backend)(
    //这个connect函数起什么作用，为什么可以把APP写在后面
    connect(mapStateToProps, mapDispatchToProps, null, { pure: false })(App)
);

Answer 1

connect 函数是个高阶函数，接受一些参数，最后返回的是一个函数，App在这里就是作为这个返回的函数的参数。具体可以看我的这篇文章，应该有所帮助。https://segmentfault.com/a/11...