作爲一個道具反應本地傳遞函數作爲子組件（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> 

我有構造（道具）{ 超級（道具）

在頂部。任何想法發生了什麼？

Answer 1

onPress是不是反應SyntheticEvent https://facebook.github.io/react/docs/events.html

變化onPress爲的onClick，它應該工作。 這裏是一個代碼和onClick工作得很好。 https://codesandbox.io/s/93ZyOWl8

Answer 2

父組件中的函數是_toggleScreen() {}，但是您將this.toggleScreen（而不是this._toggleScreen）傳遞到您的Categories組件中。這是造成toggleProp() is not a function錯誤的部分原因。

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

此外，您正在使用toggleProp作爲<Home />組件的道具，但使用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

我確實需要通過功能下降兩個孩子，我完全忘了，我渲染搜索Maincontent的內容，所以我需要通過toggleScreen作爲mainContent中的道具，然後將this.prop._toggleScreen傳遞給home組件，然後再次將其作爲道具調用。

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> 
    ); 
    } 
}