Question

您不能在功能组件上使用ref属性，因为它们没有实例。

但是，如果我的功能组件是HOC会发生什么？我希望将ref引入内部组件，而不是无状态组件。

我有以下组件：

export default (WrappedComponent) => {
  let meta = {};
  const WithForm = (props, context) => {
    const newMeta = { form: context.form };
    if (!shallowEqual(meta, newMeta)) {
      meta = newMeta;
    }
    return (
      <WrappedComponent
        {...props}
        meta={meta}
      />
    );
  };
  WithForm.propTypes = {
    meta: PropTypes.object
  };
  WithForm.contextTypes = {
    form: PropTypes.object
  };
  return WithForm;
};

我希望绕过这个无状态的组件，对它的父母来说，做类似的事情：

<WrappedComponent
  {...props}
  meta={meta}
  ref={this.ref} /* obviously wont work */
/>

即：

ComponentB: WithForm(B);

Component A:

  render() {
    return <ComponentB ref={(instance) => { this.b = instance }} />
  }

有没有办法达成类似的解决方案？

注意：

请注意，我已经考虑过创建自己的功能并使用此实例调用它 - ＆gt; this.props.attachMyRef（本）;
我还考虑过将这个无状态组件作为正常反应组件。

不要发布这种答案，我想真正使用ref属性，除非没有真正解决问题的方法

反应无状态函数HOC得到内部元素为ref

0 个答案: