리액터 구성 요소를 forceupdate없이 다시 렌더링하려면 어떻게해야합니까?

Question

저는 사용자가 이미지를 업로드하고 다른 효과를 적용 할 수있는 간단한 웹 앱을 제작하여 반응하는 것을 배우려고합니다. 나는 약간의 도로 블록을 쳤다. 사용자가 효과 중 하나를 클릭 한 후 imagecontainer를 다시 렌더링하는 방법을 파악하려고합니다. 나는 forceupdate에 관해 읽었지 만 사용하는 것은 권장하지 않습니다. 여기에 내 코드 :

import React, { Component } from 'react'; 

import ImageContainer from './components/image_container'; 
import AppliedContainer from './components/applied_container'; 
import UnappliedContainer from './components/unapplied_container'; 

class App extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     transform : false , 
     rotate : false , 
     scale : false , 
     opacity : false 
    } 

}; 


render() { 
    return (
     <div className="row"> 
      <ImageContainer onChange={this.state} /> 
      <UnappliedContainer types={this.state} onSelect={ state => 
    this.setState(state) }/> 
      <AppliedContainer types={this.state} onSelect={ state => 
    this.setState(state) }/>    
     </div> 
    ); 
} 

} 

export default App; 

감사합니다 얘들 아!

Answer 1

onChange가 ImageContainer 내부에서 수행중인 작업에 따라 다릅니다. ImageContainer를 다시 렌더링하려면 ImageContainer 내부의 onChange가 this.setState를 호출하여 ImageContainer의 상태를 새 Props로 설정할 수 있습니다.

또한 componentWillRecieveProps 또는 componentShouldUpdate 라이프 사이클 메소드를 사용하여 다시 렌더링을 트리거 할 수 있습니다. forceUpdate를 사용하지 않고 구성 요소를 업데이트의 자연 반응 따르면

http://busypeoples.github.io/post/react-component-lifecycle/

Answer 2

는 shouldn,

<ImageContainer onChange={this.state} /> 

난 정말 당신이 소품 (onChange가) 여기에 전달할 것을 이해하지 못하는 당신의 상태를 변경 입니다 그것은 당신의 상태 객체 대신에 함수가 아닌가?

제 생각에는 App 구성 요소의 일부 함수를 만들고 해당 함수에서 this.setState ({...})으로 상태를 변경 한 다음이 함수를 다음과 같이 하위 구성 요소로 전달해야합니다. 소품. 게다가 그 함수를 App 구성 요소에 바인딩하는 것을 잊지 마십시오.

React를 처음 사용하기 때문에 다른 구성 요소의 코드도 작성하고 모든 구성 요소의 동작에 대해 원하는 것을 말해 주시겠습니까? 함께 최선의 방법을 찾을 수 있습니다