javascript - React/prefer-stateless-function vs 类装饰器？

Question

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

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

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

人们如何解决这个问题？有问题的组件是一个“哑”组件(例如只有 Prop ，没有状态)，所以老实说它应该写成一个纯函数，但后来我失去了通过 @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 />)