ReactJs : 나는이 입력과 반작용 구성 요소를 가지고

Question

상태 변경에 대한 응답으로 상태를 변경하고, 선택 "고급 입력"

[ basic ] 
Hide Advanced... 
[ advanced ] 

바닥에 고급 당신이 "숨기기를 클릭하면 사라집니다 고급 "으로 변경되며"고급 표시 "로 변경됩니다. 그것은 간단하고 잘 작동합니다. 텍스트를 제어하는 ​​상태에있는 showAdvanced 키와 고급 입력이 렌더링되는지 여부가 있습니다.

외부 JS 코드는 고급 값을 변경할 수 있습니다.이 경우 현재 숨겨져 있고 값이 기본값과 다른 경우 [고급] 입력을 표시하려고합니다. 그러나 사용자는 "고급 숨기기"를 클릭하여 다시 닫을 수 있어야합니다.

외부 사람이 cmp.setState({advanced: "20"})으로 전화를 걸어 전진하고 싶습니다. 가장 간단한 방법은 내 상태로 showAdvanced을 업데이트하는 것입니다. 그러나 React의 다른 상태 변경에 대한 응답으로 일부 상태를 업데이트하는 방법이없는 것처럼 보입니다. 약간 다른 동작을 사용하여 여러 가지 해결 방법을 생각할 수 있지만이 특정 동작이 실제로 필요합니다.

showAdvanced를 props로 이동해야합니까? 주 변경 사항에 대한 응답으로 소도구를 바꿀 수 있습니까? 감사.

Answer 1

먼저 구성 부품 외부의 타사가 cmp.setState()으로 전화를 걸 수 있습니다. 이것은 거대한 반작용 노 - 아니야. 구성 요소는 자신의 setState 함수 만 호출해야합니다. 외부에서 액세스해야하는 것은 없습니다.

또한 기억해야 할 또 다른 사실은 상태 변경에 대한 응답으로 상태를 다시 변경하려고하는 경우입니다. 즉, 잘못된 작업을하는 것입니다.

이런 식으로 물건을 만들면 문제가 훨씬 어려워집니다. 그 이유는 외부에서 아무 것도 구성 요소의 상태를 설정할 수 없다는 것을 받아들이면 근본적으로 유일한 옵션은 외부 요소가 구성 요소의 소품을 업데이트하도록 허용 한 다음 구성 요소 내부에서 해당 요소에 대응할 수있게하는 것입니다. 이렇게하면 문제가 단순 해집니다.

그래서 예를 들어, 당신은 대신 다시 구성 요소에 React.renderComponent 전화 cmp.setState()를 호출 true에 같은 showAdvanced 세트를 새로운 소품이나 소품 값을 제공하는 데 사용 어떤 외부 물건을 가지고 봐야한다. 그러면 구성 요소가 componentWillReceiveProps에서 이에 대응하고 상태를 그에 맞게 설정할 수 있습니다.

var MyComponent = React.createClass({ 
    getInitialState: function() { 
     return { 
      showAdvanced: this.props.showAdvanced || false 
     } 
    }, 
    componentWillReceiveProps: function(nextProps) { 
     if (typeof nextProps.showAdvanced === 'boolean') { 
      this.setState({ 
       showAdvanced: nextProps.showAdvanced 
      }) 
     } 
    }, 
    toggleAdvancedClickHandler: function(e) { 
     this.setState({ 
      showAdvanced: !this.state.showAdvanced 
     }) 
    }, 
    render: function() { 
     return (
      <div> 
       <div>Basic stuff</div> 
       <div> 
        <button onClick={this.toggleAdvancedClickHandler}> 
         {(this.state.showAdvanced ? 'Hide' : 'Show') + ' Advanced'} 
        </button> 
       </div> 
       <div style={{display: this.state.showAdvanced ? 'block' : 'none'}}> 
        Advanced Stuff 
       </div> 
      </div> 
     ); 
    } 
}); 

그래서 처음이 구성 요소가 마운트 React.renderComponent(MyComponent({}), elem) 호출하고 고급 사업부가 숨겨집니다 : 다음 코드 예제 비트입니다. 구성 요소 안의 버튼을 클릭하면 토글되어 표시됩니다. 구성 요소 외부에서 고급 div를 표시하도록 구성 요소를 강제로 설정해야하는 경우 다음과 같이 다시 렌더링을 호출하십시오. React.renderComponent(MyComponent({showAdvanced: true}), elem) 내부 상태에 관계없이 표시합니다. 마찬가지로 외부에서 숨기려면 showAdvanced: false으로 부르기 만하면됩니다.

위의 코드 예제에 보너스를 추가하면 componentWillReceiveProps 내부에있는 setState을 호출해도 render이 호출되고 상태가 변경되므로 다른 렌더링주기가 발생하지 않습니다. 추가 정보를 원하시면 여기를 워드 프로세서에서보세요 : 이미 장착 된 구성 요소를 다시 renderComponent를 호출하면 다시 설치하지 않는 것을 잊지 마세요 http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops

을, 그냥 업데이트 구성 요소의 props 다음 것 반응하는 반응을 말한다 변화, 구성 요소의 라이프 사이클 및 렌더링 기능을 실행하고 그것은 dom diffing 마법을 수행합니다.

Answer 2

아래 주석의 수정 된 답변.

---

내 초기 오답 :

새로운 상태 나 소품이 수신 될 때 기능 componentWillUpdate이 실행됩니다 라이프 사이클. 당신은 여기에 문서를 찾을 수 있습니다 외부 setState가 호출 될 때, 당신은 다음 componentWillUpdate에 true에 showAdvanced을 설정 http://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate

, 경우에, 당신이 원하는 결과를 얻을 수 있습니다.

EDIT : 또 다른 옵션은 setState에 대한 외부 호출이 showAdvanced: true을 새 상태로 포함하는 것입니다.