时间戳

首页 > 解决方案 > 从 React 容器获取 props 到功能组件

reactjs - 从 React 容器获取 props 到功能组件

问题描述

这是我的容器的样子：

class Shipping extends React.PureComponent {
   constructor(props) {
       super(props)
   }
   componentDidUpdate(prevProps) {
       if (prevProps.match.params.shippingId !== this.props.match.params.shippingId) {
        
           this.props.getShippingDetails(this.props.match.params.shippingId)
       }
   }
   render = () => this.props.isLoading ? null : <ShippingView removeOrder={this.props.removeOrder} />
}
const mapStateToProps = ({ shippingDetails}) => ({
    isLoading: shippingDetails.isLoading
})

const mapDispatchToProps = (dispatch) => ({
    getShippingDetails: (id) => dispatch(shippingActions.getShippingDetails(id)),
    removeOrder: (id) => dispatch(shippingActions.removeOrder(id))
})

export default () => Shared.accessPageWrapper([["acess:all"], ["admin:control", "navigation/shopping:view"]], (connect(mapStateToProps, mapDispatchToProps)(Shipping)), <Shared.AccessDeniedView  />)

这就是我的功能组件的样子：

export const accessPageWrapper = (
    permissionsAllowed = [],
    component = null,
    accessDeniedView,
    accessDenied = true
) => {
    const permissions = useSelector(state => state.user.permissions)
    const permitted = permissionsAllowed.some((permission) => permission.every(el => permissions.includes(el)), false)
    if (permitted) {
        const Component = component
        return <Component />
    }
    return accessDenied ? accessDeniedView : null
}

我无法通过功能组件传递道具，如下所示：

const Component = component
return <Component {...props} />

由于这个问题，我收到以下错误，因为我的道具的婴儿车未定义。

未捕获的类型错误：无法读取未定义的属性“参数”

我不知道如何解决这个问题：/你能帮我吗？另外，我不想将上述功能组件更改为类组件。有什么方法可以检索组件的道具吗？提前致谢！！

标签： reactjsreduxreact-reduxreact-routerreact-redux-i18n

解决方案

我认为您只是错过了组件的返回。高阶组件消耗一个组件（和其他可能的参数）并返回一个新的装饰组件。

export const accessPageWrapper = (
  permissionsAllowed = [],
  component = null,
  accessDeniedView,
  accessDenied = true
) => (props) => { // <-- return a functional component
  const permissions = useSelector((state) => state.user.permissions);
  const permitted = permissionsAllowed.some(
    (permission) => permission.every((el) => permissions.includes(el)),
    false
  );
  if (component && permitted) { // <-- Ensure component exists!
    const Component = component;
    return <Component {...props} />; // <-- spread passed props to Component
  }
  return accessDenied ? accessDeniedView : null;
};

可能需要更新导出。

import { accessPageWrapper } from '.....';

...

export default accessPageWrapper(
  [["acess:all"], ["admin:control", "navigation/shopping:view"]], 
  connect(mapStateToProps, mapDispatchToProps)(Shipping), 
  <Shared.AccessDeniedView />,
);

推荐阅读