ES6에서 하위 구성 요소는 상위 구성 요소 사용 방법을 호출합니다.-JS 튜토리얼-php.cn

ES6에서 하위 구성 요소는 상위 구성 요소 사용 방법을 호출합니다.

亚连

풀어 주다： 2018-06-05 09:51:02

원래의

2023명이 탐색했습니다.

ES6에서 상위 구성 요소를 호출하는 하위 구성 요소를 어떻게 구현하나요? 다음으로 ES6에서 하위 구성 요소가 상위 구성 요소를 호출하는 방법에 대한 기사를 공유하겠습니다. 그것이 모두에게 도움이 되기를 바랍니다.

어떤 목적으로 최근 RN을 다시 공부하기 시작했는데, 단계별 학습 튜토리얼을 보다가 최근 문제, 즉 상위-하위 컴포넌트 호출 문제에 직면했습니다.

저는 오랫동안 Baidu에서 이 질문을 해왔습니다. JS의 ES6 구문에서 클래스를 사용하여 구성 요소를 생성할 때 하위 구성 요소가 상위 구성 요소의 메서드를 호출하면 시뮬레이터에서 계속 오류를 보고합니다.

제가 본 영상은 es5 문법 기반의 코드라서 문법이 조금 다릅니다.

es5의 구문에서 메서드의 this는 RN이 처리해 주었기 때문에 영상의 예시에 따라 효과를 얻을 수 있지만 es6은 직접 작성해야 할 것 같습니다. .

구체적인 작성 방법은 this.xxxxx = this.xxxxx.bind(this);

를 추가하거나 하위 컴포넌트 바인딩 시 this.xxxxx.bind(this)를 작성하는 것입니다.

여기 더 말할 것도 없이, 필요한 사람들이 참조할 수 있는 코드는 다음과 같습니다.

export default class TestPrj extends Component {
    constructor(props){
      super(props);
      this.timesReset = this.timesReset.bind(this);
      this.state = {timex:2};
    }
    timesReset(){
      this.setState({
        timex:0
      });
    }
    render() {
      return(
        <View style={styles.container}>
          <Son ref="Son1" timex={this.state.timex} timesReset={this.timesReset}/>
          //或者<Son ref="Son1" timex={this.state.timex} timesReset={this.timesReset.bind(this)}/>
        </View>
      );
    }
  }
 class Son extends Component{
  
  constructor(props){
    super(props);
    this.state = {times:this.props.timex};
  }
  componentWillReceiveProps(props){
    console.log(this.props);
    this.setState({
      times:props.timex
    })
  }
  timesReset(){
    this.props.timesReset();
  }
  render(){
    return(
    <View style={styles.container}>
      <Text style={styles.instructions}>
      儿子：虽然你揍了我 {this.state.times} 次，但是我 永 不 屈 服！！
      </Text>
      <TouchableHighlight style={styles.btn} underlayColor={&#39;pink&#39;} onPress={this.timesReset.bind(this)}>
        <Text style={{textAlign:&#39;center&#39;}}>爹，再给你儿子一次机会！！</Text>
      </TouchableHighlight>
    </View>
    );
  }
}

로그인 후 복사

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.