react.js에서 상위 구성 요소의 상태를 올바르게 설정하는 방법입니까

Question

내 기본 구성 요소의 모든 컨텍스트를 내 하위 구성 요소로 설정했으나 정상적으로 작동하는지는 모르겠지만 이것이 맞는지는 알 수 없습니다

이 내 주요 구성 요소

import Child from "./apps/child"; 

export default class NewTest extends Component { 

    constructor(){ 
    super(); 
    this.state={ 
     one:1, 
    } 
    } 

    render() { 
    return (
     <View style={styles.container}> 

     <Text>{this.state.one}</Text> 

     <Child root={this}/> //<----- Here i set all the context of my main Component to the child component 

     <TouchableOpacity onPress={()=>console.log(this.state.one)}> 
      <Text>Touch</Text> 
     </TouchableOpacity> 

     </View> 
    ); 
    } 
} 

이며,이 내 아이 컴퍼넌트

export default class Child extends Component{ 

    constructor(props){ 
    super(props); 

    this.parent=this.props.root; 
    } 

    render(){ 
    return(
     <View> 
     <TouchableOpacity onPress={()=>{ 
      this.parent.setState({one:this.parent.state.one+1}) // <- if you see here i change the state of the parent, and it work fine 
     }}> 
      <Text>Sum to Parent</Text> 
     </TouchableOpacity> 
     </View> 
    ) 
    } 
} 

이 모든 작품이지만,이 그것을 할 수있는 올바른 방법인가?

Answer 1

아니요. 부모 구성 요소의 상태를 변경하려면 자식에게 소품으로 콜백 함수를 보낸 다음 호출해야합니다. 그런 다음

increaseOne(){ 
    this.setState({one:this.state.one+1}) 
} 

을 소품으로 아이에게 보내 : 예를 들어, 당신은 당신의 NewTest의 기능을 가질 수

<Child increaseOne={this.increaseOne.bind(this)}/> 

마지막으로 자식 onPress에 그것을 호출 :

<TouchableOpacity onPress={this.props.increaseOne}> 

응용 프로그램이 너무 복잡하면 Redux을 사용할 수 있습니다.

Answer 2

최선의 "반응 방식"이 아닙니다. 콜백 ("sumToParent"와 같은 것)으로 작동해야하는 하위 구성 요소에 함수를 전달하는 것이 더 낫습니다. 부모는 합계를 만들어 그것에 반응 할 것입니다.

또 다른 옵션으로 react-router와 react-redux를 사용하여 상태를 유지할 수 있습니다.

Answer 3

당신이하려는 것은 구성 요소를 완전히 제어하는 ​​것입니다. 이것은 문제를 해결할 수있는 최선의 방법이 아니며, 조만간 다시 파업 할 것이라는 주된 추론입니다. 아이디어는 hanlders를 소품을 통해 전달하는 것입니다. 따라서 소품이 어떻게 작동하는지 알지 못하지만 소환 될 것입니다.

그래서, 코드 (함수가 이미 구속되어야한다) :

<Child increase={this.increase} decrease={this.decrease} /> 

를이 방법을 사용하면 훨씬 더 쉽게 유지하고 리팩터링 솔루션을 얻을 것이다 - 예를 들어, 형태는 기능을 제출 통과 호출 할 수 있습니다 처음에는 setTimeout을 통해 위조 할 수 있지만 나중에 실제 전화로 바뀝니다.

또한 테스트 가능성이 향상되고 커플 링이 느슨해지며 일반적으로 더 나은 코드가 생성됩니다.