React의 Higher Order Components에는 범위가 어떻게 정의되어 있습니까?

Question

JS의 클래스는 여전히 함수입니다. 그래서 우리가 Wrapped1을 만들면 App에 묶여있는 'this'가 내부에 있지만 명확하게 Wrapped1은 자체 범위를 가지기 때문에 Wrapped1을 만들 것입니다. 내가 틀린 곳을 알아낼 수 없다.

let HigherOrderComp = (Component) => class extends React.Component{ 
    construstor(props){ 
    super(props); 
    this.state = { 
     count: 0 
    }; 
    } 

    componentDidMount(){ 
    setInterval(()=>{ 
     this.setState(
     count: this.state.count + 1 
    ); 
    }, 1000) 
    } 

    render(){ 
    return <Component {...this.props} {...this.state}> 
    } 
} 

    class Comp1 extends React.Component{ 
    render(){ 
     return(
     <div> 
      <p>Comp1</p> 
      {this.props.count} 
     </div> 
    ); 
    } 
    } 

let Wrapped1 = HigherOrderComp(Comp1); 

class App extends React.Component{ 
    constructor(props){ 
    super(props); 
    } 
    render(){ 
    return(
     <div> 
     <Wrapped1/> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<App/>, document.getElementById('app')); 

Answer 1

는 Wrapped1의 인스턴스는 App 내부에 생성, 그래서 App의 지식이 없습니다. Wrapped1에서 App 인스턴스에 액세스해야하는 경우 필요한 데이터를 소품으로 전달해야합니다.