потеря функций при использовании перекомпоновки компонента в качестве ссылки

Question

У меня есть этот простой компонент

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 я получу все функции компонента приложения (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?

спасибо.

Answer 1

Вы можете передать функцию providerRef вашему компоненту, а затем предоставить ему экземпляр приложения, например

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, и, следовательно, ссылка будет применяться к HOC, а не к внутреннему компоненту, некоторые библиотеки предоставляют хук withRef для доступа к ссылке innerComponent с использованием this.playerComponentRef.getWrappedInstance(), однако я не уверен о его наличии в recompose.

Answer 2

HOC создаст один новый компонент вне дочернего. Поэтому, если вы добавляете подкомпонент в HOC и пытаетесь получить ссылку на упакованный компонент, вы получите HOCs ref .

Здесь есть обходной путь - просто передайте ссылку из родительского компонента дочерним элементам в hoc - просто прокси ссылку.