Question

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

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

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

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

带有装饰器的类组件：

@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
}

Answer 1

Redux不需要装饰工作，connect实际上只是一个功能。您可以像这样使用它：

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

React / prefer-stateless-function vs class decorators？

1 个答案: