ReactJS에서 내 자식 요소의 상태를 어떻게 얻을 수 있습니까?

Question

내가이 상황에서 내 자식 요소의 상태를 얻을 수있는 방법을 알고 싶습니다하시기 바랍니다

class Child extends React.Component{ 

    constructor(props){ 
     super(props) 

     this.state = { 
      element : "I NEED THIS STATE" 
     } 

    } 

    render(){ 
     return <h1>Hello</h1> 
    } 
} 

class Main extends React.Component{ 
    render(){ 
     return(
      <div> 
       <Child /> 
      </div> 
     ) 
    } 
} 

Answer 1

내가 당신을 이해하고 당신이 주요 구성 요소의 상태를 필요로합니다.

class Child extends React.Component{ 

    constructor(props){ 
     super(props) 

     this.state = { 
      element : "I NEED THIS STATE" 
     } 

    } 

    render(){ 
     this.props.checkStatus(this.state.element); 
     return <h1>Hello</h1> 
    } 
} 

class Main extends React.Component{ 
getChildStatus(status){ 
    console.log(status) 
} 
render(){ 
    return(
     <div> 
      <Child checkStatus={this.getChildStatus}/> 
     </div> 
    ) 
} 

}

펠릭스의 말처럼, 우리가 일반적으로 온 클릭 또는 onChange가 같은 몇 가지 이벤트에 사용 된 소품 던져 기능. 뭔가 같은 것 return <h1 onClick={this.props.checkStatus(this.state.element)}>Hello</h1>

Answer 2

간단히 말해서 @Andrew가 제안한대로 할 수 있습니다. 그러나, 나는 강력하게 당신이 정말로 무엇을하는지 알지 못한다면 당신이 이것을하지 않도록하십시오.

단방향 데이터 흐름을 유도하면 코드를 쉽게 추론 할 수 있습니다. 엄지 손가락 접근 방식은 소품 다운, 이벤트 최대까지 단순화 될 수 있습니다.

1. 데이터는 (읽기 전용 부모의 state 사고에 의한 돌연변이에서 아이를 방지 ) props를 사용하여 아이에게 부모로부터 아래로 전달합니다.
2. 이벤트은 부모님에게 상황을 알리기 위해 어린이로부터 거품을 뿜습니다.

(일반적으로 자녀의 이벤트 핸들러에서 부모 전달 기능/콜백 props를 호출하여)에서는의 반응 구성 요소 시스템, 부모와 자식 모두 범위를 을 격리했다. 이는 부모가 자녀에 대해 전혀 알지 못한다는 것을 의미하며 (자녀의 state 포함), 자녀는 props을 통해서만 부모의 데이터를 읽을 수 있습니다. UI 새로 고침을 트리거하기 위해 상태를 변경하려면 친구 인. this.setState()이 일반적으로 이벤트 핸들러/서버 요청 콜백에 사용됩니다.

권장 독서 : Btw는 https://facebook.github.io/react/docs/thinking-in-react.html

_{. React의 선언적 구성 요소 구성은 본질적으로 함수 구성입니다. 당신의 질문은 "선언 된 함수에서 클로저의 지역 변수를 얻을 수 있습니까?"라고 할 수 있습니다. 분명히 이것을 할 수는 있지만 캡슐화를 해체하기 위해 이것을하는 이유는 자문해야합니다.}