자식 구성 요소에서 부모 구성 요소 업데이트

자식 구성 요소에서 부모 구성 요소를 다시 렌더링 할 수 없습니다. 하위 클래스에 componentDidMount을 전달하고 난 다음에이를 호출하고 부모에게 다시 렌더링을 요청합니다. render 함수가 호출되었지만 내용은 변경되지 않습니다. 뭐가 문제 야?자식 구성 요소에서 부모 구성 요소 업데이트

var Parent = React.createClass({ 
    getInitialState: function() { return {content: 'clean'}; }, 
    componentDidMount: function() { 
     this.setState({content: 'changed!'}); 
    }, 
    render: function() { 
     return React.createElement('div', {rerender: this.componentDidMount.bind(this)}, this.state.content); 
    } 
}); 

var Child = React.createClass({ 
    render: function() { 
     return React.createElement('div', {onClick: this.handleClick}, 'click me'); 
    }, 
    handleClick: function() { 
     this.props.rerender(); 
    } 
}); 

ReactDOM.render(
     React.createElement(ReactRouter.Router, {history: ReactRouter.browserHistory}, 
       React.createElement(ReactRouter.Route, {path: '/parent', component: Parent}) 
     ) 
, document.getElementById('content'));

출처

2016-08-22 user99999

클래스 메소드를 자식 컴포넌트에 소품 콜백으로 보내면, 부모 컴포넌트에서 콜백은'setState'가 필요합니다. –

그렇지만 내 예제에서했던 것일 것입니다. – user99999

'this.componentDidMount'를 이벤트 콜백으로 사용하지 마십시오. :) 당신은 부모 컴포넌트에서'rerender'를 처리 할 자신의 함수를 생성해야합니다. 부모 컴포넌트가 마운트 될 때 상태가'content : changed! '가 될 것이므로 물론 기회가되지 않을 것입니다. 그 같은 기능은 국가가 동일하게 될 것입니다 .. – Hardy

componentDidMount()은 구성 요소가 렌더링을 완료 할 때 호출되는 생명주기 기능입니다.

전체 재 렌더링 프로세스를 우회하는 것처럼 보입니다.

대신 자신의 기능을 만들어야합니다.

changeContent: function() { 
     this.setState({content: 'changed!'}); 
    },

그리고는 rerender에 changeContent()를 전달합니다.

일반적으로 React의 LifeCycle 메서드를 전달하지 마십시오!

출처

2016-08-22 22:40:45 Cent

Facebook의 사람들은 이러한 모든 종류의 문제를 해결하기 위해 단방향 데이터 흐름 패턴을 제안합니다. 귀하의 자녀 구성 요소는 부모에 대해 알지 못하며 일종의 상태 (Flux, Redux, Reflux)를 변경해야합니다. 상태를 변경하면 상위 구성 요소가 다시 렌더링됩니다.

출처

2016-08-22 22:59:22

자식 구성 요소에서 부모 구성 요소 업데이트

답변

관련 문제