所以,我正在建立一个全新的 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
}
最佳答案
Redux 不需要装饰器来工作,connect
实际上只是一个函数。你可以像这样使用它:
export default connect(mapStateToProps)(props => <div />)
关于javascript - React/prefer-stateless-function vs 类装饰器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39074961/