React/prefer-stateless-function vs class decorators？

Question

所以,我正在建立一个全新的React项目,并将我的所有产品更新到最新版本.

这导致了项目中的一些夹板破损,所以我要经历并纠正这些.

我似乎遇到了相互矛盾的规则.React/prefer-stateless-function试图告诉我将我的组件编写为纯函数,但如果我这样做,我就不能再使用装饰器将我的组件连接到我的Redux存储.

人们如何解决这个问题？有问题的组件是一个"哑"组件(例如只有道具,没有状态),所以老实说它应该写成一个纯函数,但后来我失去了通过@asyncConnect和连接到我的商店的能力@connect.

带装饰器的类组件:

@connect(
  state => ({ // eslint-disable-line
    user: state.publicData.user.data,
    error: state.publicData.user.error,
    loading: state.publicData.user.loading,
  }),
  { initializeWithKey })
export default class UserProfile extends Component {
  ...stuff
}

纯功能组件:

// How can I use decorators?
export default function UserProfile(props) {
  ...stuff
}

两个装饰器组合的案例:

@asyncConnect([{
  deferred: true,
  promise: ({ params, store: { dispatch, getState } }) => {
    if (!isLoaded(getState())) {
      return dispatch(loadUser(params.userID))
    }
  },
}])
@connect(
  state => ({ // eslint-disable-line
    user: state.publicData.user.data,
    error: state.publicData.user.error,
    loading: state.publicData.user.loading,
  }),
  { initializeWithKey })
export default class UserProfile extends Component {
  ...stuff
}

Answer 1

Redux不需要装饰器工作,connect实际上只是一个功能.你可以像这样使用它:

export default connect(mapStateToProps)(props => <div />)