[英]React/prefer-stateless-function vs class decorators?
So, I am setting up a brand new React project, and have updated all my deps to the latest versions. 所以,我正在建立一个全新的React项目,并将我的所有产品更新到最新版本。
This caused some eslint breakages in the project, so I'm going through and correcting these. 这导致了项目中的一些夹板破损,所以我要经历并纠正这些。
I seem to have come across conflicting rules. 我似乎遇到了相互矛盾的规则。 React/prefer-stateless-function tries to tell me to write my component as a pure function, but if I do that, I can no longer use decorators to connect my component to my Redux store.
React / prefer-stateless-function试图告诉我将我的组件编写为纯函数,但如果我这样做,我就不能再使用装饰器将我的组件连接到我的Redux存储。
How are people getting around this? 人们如何解决这个问题? The component in question is a "dumb" component (eg only props, no state), so honestly it should be written as a pure function, but then I lose the ability to connect it to my store via
@asyncConnect
and @connect
. 有问题的组件是一个“哑”组件(例如只有道具,没有状态),所以老实说它应该写成一个纯函数,但后来我失去了通过
@asyncConnect
和@connect
将它连接到我的商店的能力。
Class component with decorators: 带装饰器的类组件:
@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
}
Pure function component: 纯功能组件:
// How can I use decorators?
export default function UserProfile(props) {
...stuff
}
Case of two decorators combined: 两个装饰器组合的案例:
@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
}
Redux doesn't need decorators to work, connect
is really just a function. Redux不需要装饰器工作,
connect
实际上只是一个功能。 You can use it like this: 你可以像这样使用它:
export default connect(mapStateToProps)(props => <div />)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.