React/prefer-stateless-function vs class 装饰器？

Question

所以，我正在建立一个全新的 React 项目，并将我所有的部门更新到最新版本。

这导致了项目中的一些 eslint 损坏，所以我正在检查并纠正这些问题。

我似乎遇到了相互冲突的规则。 React/prefer-stateless-function 试图告诉我将我的组件写成一个纯函数，但如果我这样做，我就不能再使用装饰器将我的组件连接到我的 Redux 商店。

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

Class 带有装饰器的组件：

@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 />)

React/prefer-stateless-function vs class 装饰器？

React/prefer-stateless-function vs class decorators?

javascript

ecmascript-6

reactjs

eslint

redux