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

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

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

чтобы увидеть рабочий способ swtich

<ModifyedApp ref={this.setComponentRef} />

to 

<App ref={this.setComponentRef} />

что мне здесь не хватает? почему использование Recompose HOC удаляет внутренние функции компонента класса App?

Благодарю.


reactjs javascript recompose
person greW    schedule 03.05.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете передать функцию 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.

person Shubham Khatri    schedule 03.05.2018

arrow_upward
0
arrow_downward

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

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

person Dmitriy Kovalenko    schedule 03.05.2018
comment
спасибо за ответ, передайте ссылку от родительского компонента дочерним в hoc, можете ли вы показать пример, пожалуйста? - person greW; 03.05.2018