子コンポーネントへのネイティブ・パス関数を小道具として反応させます（this.props.functionNameは関数ではありません）

Question

この質問は他の多くの場所でも見られましたが、何らかの理由でバインディングや宣言別の方法として、私は_this3.props.toggleProp（）が関数ではないという同じエラーを受け取り続けます。 （ '_this3.props.toggleProp（）' は、「_this3.props.togglePropは未定義である。）

私の親コンポーネントは次のとおりです。

 constructor (props) { 
    super(props) 
    this.state = { 
     selectedTab: 'home', 
     notificationNumber: -1, 
    } 
    this._toggleScreen = this._toggleScreen.bind(this); 
    this.toggleSchedule = this.toggleSchedule.bind(this); 

    } 

    _toggleScreen() { 
     this.setState({ 
     selectedTab: 'categories', 
     }) 
    } 

    render(): React$Element<any> {  
    function MainContent(props) { 
     const selectedTab = props.selectedTab; 
     if (selectedTab === 'home') { 
     return <Home toggleProp={this._toggleScreen} grain="this one here"/>; 
     } 
     if (selectedTab === 'categories') { 
     return <Categories toggleScreen={this.toggleScreen} />; 
     } 

     return <Schedule />; 
    } 
    return (
     <View style={styles.container}> 
      <MainContent selectedTab={this.state.selectedTab} style={styles.content}/> 
     </View> 
    ); 
    } 
} 

と私の子コンポーネントの重要な部分は、次のとおりです。

render(): React$Element<any> { 
return (
     <Icon.Button name="home" backgroundColor="rgba(0,0,0,0)" onPress={()=>{this.props.toggleProp()}}> 
     </Icon.Button> 

iは、コンストラクタ（小道具）{ スーパー（小道具）上部に

を有します。何が起こっているのアイデア？

Answer 1

たonPressはonClickのための反応SyntheticEvent https://facebook.github.io/react/docs/events.html

変更たonPressではなく、それが動作するはずです。 ここはコードであり、onClickはうまく機能しています。 https://codesandbox.io/s/93ZyOWl8

Answer 2

あなたの親コンポーネント内の関数は、しかし、あなたのカテゴリーコンポーネントにthis.toggleScreenの代わりthis._toggleScreenに渡している、_toggleScreen() {}です。これは、toggleProp() is not a functionエラーの原因の一部です。

if (selectedTab === 'categories') { 
    return <Categories toggleScreen={this._toggleScreen} />; 
} 

また、あなたは<Home />コンポーネントで小道具としてtogglePropを使用しているが、あなたのカテゴリーコンポーネントに小道具としてtoggleScreenを使用しているので、これもtoggleProp is undefinedエラーをスローします。

作業機能をレンダリングするには、次のようになります。

render(): React$Element<any> {  
    function MainContent(props) { 
     const selectedTab = props.selectedTab; 
     if (selectedTab === 'home') { 
     return <Home toggleProp={this._toggleScreen} grain="this one here"/>; 
     } 
     if (selectedTab === 'categories') { 
     return <Categories toggleProp={this._toggleScreen} />; 
     } 

     return <Schedule />; 
    } 
    return (
     <View style={styles.container}> 
      <MainContent selectedTab={this.state.selectedTab} style={styles.content}/> 
     </View> 
    ); 
    } 

Answer 3

をI実際に2人の子供が機能を伝承するために必要な、私は完全に私がMainContentの中にコンテンツをレンダリングしていたことを忘れていましたので、私は渡す必要がありますtoggleScreenをmainContentの小道具として使用し、次にthis.prop._toggleScreenをホームコンポーネントに渡し、次にそれをもう一度小道具として呼び出します。

handler(e) { 
    this.setState({ 
    selectedTab: 'categories', 
    }) 
} 

    render(): React$Element<any> {  
    function MainContent(props) { 
     const selectedTab = props.selectedTab; 
     if (selectedTab === 'home') { 
     return <Home handler={props.handler} grain={props.selectedTab} />; 
     } 
     else if (selectedTab === 'categories') { 
     return <Categories toggleScreen={this.toggleScreen} />; 
     } 

     return <Schedule />; 
    } 

    return (
     <View style={styles.container}> 
      <MainContent selectedTab={this.state.selectedTab} style={styles.content} handler={this.handler}/> 
     </View> 
    ); 
    } 
}