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