2

我有这个简单的组件

class App extends React.Component {
  a = () => null
  b = () => null
  c = () => null

  render() {
    return (<div>hey123</div>)
  }
}

这是我的第二个组件，参考第一个组件

class BApp extends React.Component {
  setComponentRef = ref => {
    console.log('ref', ref)
    this.playerComponentRef = ref
  }
  render() {
    return (
      <div>
        <App ref={this.setComponentRef} />
      </div>)
  }  
}

在这种情况下，在 console.log 中，我将收到所有 App 组件的功能（a、b、c），但如果我Recompose.withState在App组件上使用，我将不再收到它们。请参阅此处的示例 https://codepen.io/anon/pen/qYjpoE?editors=1111

看工作方式开关

<ModifyedApp ref={this.setComponentRef} />

至

<App ref={this.setComponentRef} />

我在这里想念什么？为什么使用 Recompose HOC 会删除App类组件内部功能？

谢谢。

4

2 回答 2

1

您可以将一个函数传递providerRef给您的组件，然后向它提供 App 实例

class BApp extends React.Component {
  setComponentRef = ref => {
    console.log('ref', ref)
    this.playerComponentRef = ref
  }
  render() {
    return (
      <div>
        <App providerRef={this.setComponentRef} />
      </div>)
  }  
}


class App extends React.Component {
  a = () => null
  b = () => null
  c = () => null
  componentDidMount() {
     this.props.providerRef(this);
  }
  render() {
    return (<div>hey123</div>)
  }
}

在 Recompose 的情况下，它是一个 HOC，因此 ref 将应用于 HOC 而不是内部组件，一些库提供了一个withRef挂钩来使用 访问 innerComponent ref this.playerComponentRef.getWrappedInstance()，但是我不确定它在recompose.

于 2018-05-03T09:58:53.223 回答
0

HOC 将在子组件之外创建一个新组件。因此，如果您将子组件包装在 HOC 中并尝试接收包装组件的 ref，您将获得HOCs ref。

这里有一个解决方法 - 只需将 ref 从父组件传递给 hoc 中的子组件 - 只需代理 ref。

于 2018-05-03T09:51:15.340 回答