イベントを子要素から曾祖父に渡す

Question

私はReact Nativeに慣れてきました。このような設定を使用して、私はその親にさえまで子供から渡すことができるよ：

子供：

<TouchableOpacity onPress={() => {this.props.click("Cool.")}}> 

親：

constructor(props) { 
    super(props); 
    this.click = this.click.bind(this) 
} 

click(c) { 
    console.log(c) // "Cool." 
} 

render() { 
    return (
    <View> 
     <Child click={this.click}> 
    </View> 
    } 
} 

しかし、私が変更した場合親の復帰：

<View> 
    <Child click={this.props.click}> 
</View> 

はその後祖父のコンポーネントを使用します。

<View> 
    <Parent click={this.click}> 
</View> 

私はクリックイベントを取得していませんが、エラー"_this2.props.click is not a function"子要素を<TouchableOpacity onPress={this.props.click}>に変更すると、イベントが処理されないように見えます。

究極的には、Great-Grandfatherレベルでイベントハンドラをトリガして、ルートレベルで状態を変更し、変更を下位にカスケードさせたいと思います。

Answer 1

refを使用して子供の方法にアクセスできます。あなたはこれの文書をhereに見ることができます。

class Child extends Component { 
    open =() => { 
    this.props.setVisible(true) 
    } 

    render() { 
    <View ref={this.props.refFunc}> 
     ... 
    </View> 
    } 
} 

class Parent extends Component { 
    _ref = (e) => { this._child = e } 

    runFunction =() => { 
    this._child.open(); // you can use the open function of child here 
    } 

    render() { 
    ... 
    <Child refFunc={this._ref}> 
    ... 
    } 
} 

そして、あなたは、子から親を変更したいときは、関数を定義し、propとして子コンポーネントにそれを渡すなどのイベントにそれを使用する必要があります：refを使用しての簡単な例は、以下のようなものです子コンポーネントのonPressこれを実現するには、サンプルコードは次のようになります。

このようにして、子コンポーネントから親状態にアクセスできます。