Reactjs 从React容器到功能组件获取道具

以下是我的容器的外观：

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
}

class Shipping扩展了React.PureComponent{
建造师（道具）{
超级（道具）
}
componentDidUpdate（prevProps）{
if（prevProps.match.params.shippingId！==this.props.match.params.shippingId）{
this.props.getShippingDetails（this.props.match.params.shippingId）
}
}
render=（）=>this.props.isLoading？空：
}
常量mapStateToProps=（{shippingDetails}）=>({
isLoading:shippingDetails.isLoading
})
const mapDispatchToProps=（调度）=>({
getShippingDetails：（id）=>调度（shippingActions.getShippingDetails（id）），
removeOrder：（id）=>分派（shippingActions.removeOrder（id））
})
导出默认值（）=>Shared.accessPageWrapper（[[“访问：全部”]，[“管理员：控制”，“导航/购物：查看”]，（连接（mapStateToProps，mapDispatchToProps）（配送）），）

这就是我的功能组件的外观：

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
}

export const accessPageWrapper=(
许可证SALLOWED=[]，
组件=空，
accessDeniedView，
accessDenied=true
) => {
const permissions=useSelector（state=>state.user.permissions）
const-allowed=permissionsAllowed.some（（权限）=>permission.every（el=>permissions.includes（el）），false）
如果（允许）{
常量组件=组件
返回
}
返回accessDenied？accessDeniedView:null
}

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

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

const Component=组件
返回

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

未捕获的TypeError:无法读取未定义的属性“params”

我不知道怎么解决这个问题：/你能帮我一下吗？ 此外，我不想将上述功能组件更改为类组件。

---

有没有办法把道具拿到组件上？提前谢谢

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

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

export const accessPageWrapper=(
许可证SALLOWED=[]，
组件=空，
accessDeniedView，
accessDenied=true
)=>（道具）=>{//state.user.permissions）；
const allowed=许可被取消(
（权限）=>permission.every（（el）=>permissions.includes（el）），
假的
);
如果（component&&allowed）{/我认为您缺少组件的返回。高阶组件使用组件（和其他可能的参数）并返回新的装饰组件

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

export const accessPageWrapper=(
许可证SALLOWED=[]，
组件=空，
accessDeniedView，
accessDenied=true
)=>（道具）=>{//state.user.permissions）；
const allowed=许可被取消(
（权限）=>permission.every（（el）=>permissions.includes（el）），
假的
);
如果（组件和允许的组件）{//你不应该在functional components
accessPageWrapper
中使用
this
应该是一个更高阶的组件？其中定义了iis
accessDenied
？另外，函数组件是无实例的，因此它们没有
this
，或者更确切地说，
this
只是未定义。对不起，我已经添加了参数请看一看。是的，这是一个高阶组件@DrewReese@UKS是的，这是一个例子。我的问题是如何在这里获得道具？在功能组件
accessPageWrapper
中不应该使用
this
应该是一个更高阶的组件？其中定义了iis
accessDenied
以及功能组件是无实例的，因此它们没有
此
，或者更确切地说，
此
只是未定义。对不起，我已添加了参数。请查看。是的，它是一个高阶组件@DrewReese@UKS是的，这是一个例子。我的问题是如何在这里获取道具？道具会自动作为参数传递？@Dayan AutOMATALY？不，我不这么认为。您的HOC必须将它们传递给它正在包装的组件。记住，HOC消耗一个组件，并返回一个组件。所有react组件都可以接收一个props对象。我已将此部分添加到我的“acessPageWrapper”函数->“=>（props）=>{”它正在破坏代码。我还需要做什么吗？@Dayan你能再解释一下代码是如何破坏的吗？有错误吗？@Dayan好的，也许我更新的装饰组件导出建议不太正确。只是在a中尝试了这段代码，它的功能似乎与我预期的一样。你能尝试将代码复制到我们正在运行的codesandbox中吗可以在中调试吗？道具会自动作为参数传递吗？@Dayan automatically？不，我不这么认为。您的HOC必须将它们传递给它正在包装的组件。请记住，HOC使用一个组件并返回一个组件。所有react组件都可以接收道具对象。我已将此部分添加到我的“acessPageWrapper”函数->“=>（道具）=>{"它正在破坏代码。我还需要做什么吗？@Dayan你能再解释一下代码是如何破坏的吗？有错误吗？@Dayan好的，也许我更新的装饰组件导出建议不太正确。只是在a中尝试了这段代码，它的功能似乎与我预期的一样。你能尝试将代码复制到我们正在运行的codesandbox中吗可以调试吗？