我一直坚持使用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 recompose
或yarn 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(我相信)是一个接受