구성 요소를 계속 마운트 해제하지 않고 React 구성 요소를 래핑하는 데 Higher Order 함수 (또는 대안)를 사용하는 방법?

Question

고등 함수 (HOWrapper)를 사용하여 래핑 된 다른 구성 요소 (Child)가있는 리액터 구성 요소 (Parent)가 있습니다. 내가 겪고있는 문제는 Parent 구성 요소가 렌더링 될 때마다 Child 구성 요소가 마운트 해제 된 다음 다시 마운트된다는 점입니다. Child 구성 요소의 마운트가 해제되는 것을 막을 수있는 방법을 찾아야하지만 이름이 동적으로 할당 된 구성 요소에 계속해서 래핑을 계속합니다. 또한 Parent의 render() 함수에서 동적으로 생성 될 수있는 HOWrapper 함수에 추가 매개 변수를 전달하는 옵션이 필요합니다. 어떤 아이디어?

부모 요소 :

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

     let ChildWrapper = HOWrapper(Child); 

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

높은 주문 기능 :하지 모든 렌더링 호출시에 보내서 때 HOC는 구성 요소, 한 번에이다 사용에 대한보다 일반적인 접근 방식을 반환하기 때문에

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

     ... 

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

Answer 1

.

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

그런 다음 동적으로 새 소품을 전달하십시오.

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