Question

我正在尝试创建一个功能非常简单的HOC。从上下文中添加包装组件的支柱。

我能够这样做：

const WithForm = WrappedComponent => class extends Component {
  static contextTypes = {
    ctx: PropTypes.object
  };
  render() {
    return <WrappedComponent {...this.props} ctx={this.context.ctx} />;
  }
};

export default WithForm;

现在我希望这是一个纯函数，因为我只有render（）方法。

所以，看Official guide，我做了以下事情：

const WithForm = WrappedComponent => (props, context) => {
  console.log('props', props, 'context', context);
  return <WrappedComponent {...props} ctx={context.ctx} />;
};

WithForm.contextTypes = {
  ctx: PropTypes.object
};

export default WithForm;

但是，上下文将变为空：{}

我做错了什么？

Answer 1

试试这个：

const withForm = WrappedComponent => {
    let WithForm = (props, context) => {
      console.log('props', props, 'context', context);
      return <WrappedComponent {...props} ctx={context.ctx} />;
    };

    WithForm.contextTypes = {
      ctx: PropTypes.object
    };
    return WithForm;
}

export default withForm;

这是因为你试图在包装函数上设置上下文而不是在纯函数上。

在原始class代码段中，您可以正确设置内部函数。

将HOC与上下文转换为反应纯函数

1 个答案: