[英]Is it possible to transfer array with data to another component by react-redux in HOC
I may be missing something, but I can't find any example how to pass array with data from HOC component to another component. 我可能会丢失一些东西,但找不到任何示例如何将带有数据的数组从HOC组件传递到另一个组件。 Here is my code 这是我的代码
import React from 'react' import NoAccessPage from '../../pages/Admin/NoAccess'; import { menuItems } from '../../config/menu'; import {connect} from 'react-redux' const AuthorizationHOC = (access) =>{ (WrappedComponent) => class WithAuthorization extends React.Component { constructor(props) { super(props) this.state = { user: { accessItems: [ 'reseptionPointsAccess', 'servicesAccess' ] } } } render() { const { accessItems } = this.state.user; let menuAccess = []; menuItems.forEach(item => { if (accessItems.includes(item.access)) { menuAccess.push(item) } }) return ( <div> {accessItems.includes(access) ? <WrappedComponent {...this.props} /> : <NoAccessPage/> } </div> ) } } } const mapStateToProps = state => { return { menuArray: state } } export default connect(mapStateToProps)(AuthorizationHOC)
I would like to pass array menuAccess
to another component, but I can't wrap AuthorizationHOC
by connect. 我想将array menuAccess
传递给另一个组件,但是无法通过connect包装AuthorizationHOC
。
In console I received 在控制台中,我收到了
Cannot call a class as a function
You don't need to wrap the HOC with connect, what you need is to wrap the returned component with connect 您无需使用connect包装HOC,您需要的是使用connect包装返回的组件
import React from 'react'
import NoAccessPage from '../../pages/Admin/NoAccess';
import { menuItems } from '../../config/menu';
import {connect} from 'react-redux'
const AuthorizationHOC = (access) =>{
(WrappedComponent) => {
class WithAuthorization extends React.Component {
constructor(props) {
super(props)
this.state = {
user: {
accessItems: [
'reseptionPointsAccess',
'servicesAccess'
]
}
}
}
render() {
const { accessItems } = this.state.user;
let menuAccess = [];
menuItems.forEach(item => {
if (accessItems.includes(item.access)) {
menuAccess.push(item)
}
})
return (
<div>
{accessItems.includes(access) ? <WrappedComponent {...this.props} /> : <NoAccessPage/> }
</div>
)
}
}
return connect(mapStateToProps)(WithAuthorization);
}
}
const mapStateToProps = state => {
return {
menuArray: state
}
}
export default AuthorizationHOC;
Okey, I have tried to use this code, and now I have got this error in console: Okey,我尝试使用此代码,现在在控制台中出现此错误:
(0 , _AuthorizationHOC2.default)(...) is not a function
This error shows up during rendering my HOC 呈现我的HOC期间显示此错误
<Route path="/link" exact component={AuthorizationHOC('listOfOrdersAccess')(ListOfOrders)} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.