Question

我知道标题很奇怪，但让我解释一下。我有一个带有道具的组件：

queue

然后我需要使用如下包装函数将其导出：

const MainExperienceComponent = props => (
  <div>
    ....
  </div>
);

问题是我想在export default withWrapper(MainExperienceComponent);内部传递道具。更具体地说，我需要这样做：withWrapper，因为withWrapper(MainExperienceComponent, prop.id)有两个参数。该怎么做？

Answer 1

您可以将MainExperienceComponent 包裹在您要使用的类中（拥有您要传递的道具的类），并将其分配为实例变量。

class Container extends Component {
  // inside the constructor:
  constructor(props) {
    super(props)
    this.WrappedComponent = withWrapper(MainExperienceComponent, props.id)
  }

  // or outside the constructor:

  WrappedComponent = withWrapper(MainExperienceComponent, this.props.id)

  render() {
    return (
      // Use <this.WrappedComponent /> here
    )
  }
}

您的HOC随后将接受两个参数：

const withWrapper(WrappedComponent, id) => {
  ...
}

这是假设Container组件可以访问您要传递的道具。如果将id道具传递到MainExperienceComponent组件，那么HOC将已经可以访问它。

呼叫者：

const Wrapped = withWrapper(MainExperienceComponent)
...
<Wrapped id={someId} /> // where does someId come from?

HOC：

const withWrapper = (WrappedComponent) => {
  class NewComponent extends Component {
    // you have access to `this.props.id`
    render() {
      return <WrappedComponent />
    }
  }

  return NewComponent
}

如果是这种情况，则无需将两个参数传递给HOC，因此我不确定这是否能回答您的问题。让我知道我是否误会了。

当该道具位于组件内部时，在Hoc函数中传递该道具

1 个答案: