Question

如何干净地组合高阶组件？目前我有类似的东西，必须有一种更清洁的方式来组合和组合HOC＆＃39>

const appWithWidth = withWidth()(App);

const appWithReduxAndWidth = connect(mapStateToProps, mapDispatchToProps)(appWithWidth);

const appWithRouterAndCookiesAndReduxAndWidth = withRouter(withCookies(appWithReduxAndWidth));

export default appWithRouterAndCookiesAndReduxAndWidth;

Answer 1

是的，recompose是一个很棒的图书馆。

例如，使用compose：

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

Answer 2

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

import { compose } from 'recompose'

export default compose(
  withWidth,
  connect(mapStateToProps, mapDispatchToProps),
  withCookies,
  withRouter
)(App)

Answer 3

您可以使用redux：

中包含的compose

import { compose } from 'redux';

export default compose(
  withRouter,
  withCookies
  connect(mapStateToProps, mapDispatchToProps),
  withWidth()
)(App);

Answer 4

对我来说，这个作品有效，但顺序对我的测试很重要。当我使用带有来自material-ui的宽度的路径时，它显示了'无限循环中的setState'的错误。不确定原因，可能有些人可以解释。这是我的代码，将帮助某人。

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

如何组合高阶组件？

4 个答案: