Как использовать функцию более высокого порядка (или альтернативу) для упаковки компонента React без постоянной развязки компонента?

Question

У меня есть реактивный компонент (Parent), внутри которого есть другой компонент (Child), который обернут с использованием функции более высокого порядка (HOWrapper). Проблема, с которой я сталкиваюсь, заключается в том, что каждый раз, когда компонент Parent отображается, компонент Child размонтирует, а затем снова монтирует. Мне нужно найти способ, который предотвращает размонтирование компонента Child, но все равно продолжит его перенос в компонент, имя которого динамически назначается. Я также хочу, чтобы опция передавала дополнительные параметры функции HOWrapper, которая также может быть динамически сгенерирована в функции render()Parent. Есть идеи?

компонент Родитель:

import { HOWrapper } from './somepath'; 
import Child from './someotherpath'; 
export default class Parent extends Component { 
    ... 
    render(){ 

     let ChildWrapper = HOWrapper(Child); 

     return (
      <ChildWrapper {...this.props} /> 
     ); 
    } 
} 

функций высшего порядка:

export function HOWrapper(WrappedComponent) { 
    return class Blanket extends Component { 
     constructor(props) { 
      super(props); 
      this.state = { 
       ... 
      }; 
     } 

     ... 

     render() { 
      return (
       <WrappedComponent 
        {...this.props} 
       /> 
      ); 
     } 
    } 
} 

Answer 1

Поскольку HOC возвращает компонент, более типичный подход к использованию их в один раз, когда их экспорт, а не на каждом визуализации вызова ,

let YourComponent = props => <div /> 
export default HOC(YourComponent) 

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

render() { return <YourComponent dynamicProps={foo} /> }