当前位置: 首页 > 面试题库 >

React Material UI-导出多个高阶组件

范承教
2023-03-14
问题内容

我一直坚持使用redux连接器导出Material-ui样式。这是我的代码:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Drawer from 'material-ui/Drawer';
import { withStyles } from 'material-ui/styles';
import PropTypes from 'prop-types';

const mapStateToProps = state => ({});

const reduxConnector = connect(mapStateToProps, null);
const styles = theme => {
    console.log(theme);
    return ({
        paper: {
            top: '80px',
            boxShadow: theme.shadows[9]
        },
    });
};

class Cart extends Component {

    render() {
        const { classes } = this.props;
        return (
            <Drawer
                open
                docked
                anchor="right"
                classes={{ paper: classes.paper }}
            >
                <p style={{ width: 250 }}>cart</p>

            </Drawer>
        );
    }
}

export default withStyles(styles, {name: 'Cart'})(Cart);
export default reduxConnector(Cart); // I want to add this

我试过了:

export default reduxConnector(withStyles(styles))(Cart); // return Uncaught TypeError: Cannot call a class as a function

export default withStyles(styles, {name: 'Cart'})(reduxConnector(Cart)); // return Uncaught Error: Could not find "store" in either the context or props of "Connect(Cart)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Cart)".

有什么办法吗?


问题答案:

安装npm install recomposeyarn add recompose

在您的出口部分

export default compose(
    withStyles(styles, {
        name: 'App',
    }),
    connect(),
)(AppFrame);

我忘了出口我的商店。



 类似资料:
  • Examples Using the `withRouter` utility 如果你想应用里每个组件都处理路由对象,你可以使用withRouter高阶组件。下面是如何使用它: import { withRouter } from 'next/router' const ActiveLink = ({ children, router, href }) => { const style =

  • 在React中,高阶组件是重用组件逻辑的一项高级技术。高阶组件并不是React API的一部分。高阶组件源自于React生态。 具体来说,高阶组件是一个函数,能够接受一个组件并返回一个新的组件。 const EnhancedComponent = higherOrderComponent(WrappedComponent); 组件是将props转化成UI,然而高阶组件将一个组价转化成另外一个组件

  • 本文向大家介绍写一个react的高阶组件并说明你对高阶组件的理解相关面试题,主要包含被问及写一个react的高阶组件并说明你对高阶组件的理解时的应答技巧和注意事项,需要的朋友参考一下 定义高阶组件 import React, { Component } from 'react'; const simpleHoc = WrappedComponent => { console.log('simple

  • 本文向大家介绍React.js中的高阶组件,包括了React.js中的高阶组件的使用技巧和注意事项,需要的朋友参考一下 高阶部分简称为hoc。这是一种接收组件并返回具有附加功能的新组件的模式。 // hoc是自定义JavaScript函数的名称 我们使用带有状态和/或道具的组件来构建UI。hoc用类似的方法从提供的组件中构建一个新组件。 使用hoc在React中成为一个横切关注点。这些组件将负责单

  • 本文向大家介绍使用高阶组件(HOC)实现一个loading组件相关面试题,主要包含被问及使用高阶组件(HOC)实现一个loading组件时的应答技巧和注意事项,需要的朋友参考一下

  • 我正在用TypeScript编写一个React高阶组件(HOC)。HOC应该比包装组件多接受一个道具,所以我写了以下内容: 换句话说,是一个生成实际hoc的函数。这个HOC(我相信)是一个接受