如何组合高阶组件?

Question

如何干净地组合高阶组件？目前我有这样的东西，必须有一种更干净的方式来组合和组合 HOC 的

const appWithWidth = withWidth()(App);
const appWithReduxAndWidth = connect(mapStateToProps, mapDispatchToProps)(appWithWidth);
const appWithRouterAndCookiesAndReduxAndWidth = withRouter(withCookies(appWithReduxAndWidth));
export default appWithRouterAndCookiesAndReduxAndWidth;

Answer 1

是的，recompose是一个很好的库。

例如，使用撰写：

export default compose(
withWidth(all_the_cookie_width), 
withCookies, 
withMilk, 
withHoldTheSprinkles
)(App);

Answer 2

您可以使用组合多个高阶组件的 recomppose 中的compose。

import { compose } from 'recompose'
export default compose(
withWidth,
connect(mapStateToProps, mapDispatchToProps),
withCookies,
withRouter
)(App)

Answer 3

您可以使用 redux 附带的撰写：

import { compose } from 'redux';
export default compose(
withRouter,
withCookies
connect(mapStateToProps, mapDispatchToProps),
withWidth()
)(App);

Answer 4

对我来说，作曲有效，但根据我的测试，顺序很重要。当我使用来自 material-ui 的 Router 时，它显示了"无限循环中的 setState"的错误。不确定原因，可能有人可以解释。这是我的代码，会帮助某人。

import compose from 'recompose/compose';
....
...
....
export default compose(
connect(mapStateToProps, null),
withRouter,
withWidth()
)(AppNav);