将本机传递函数作为道具反应给子组件（this.props.functionName 不是函数）答案

【问题标题】：react native pass function to child component as a prop (this.props.functionName is not a function)将本机传递函数作为道具反应给子组件（this.props.functionName 不是函数）
【发布时间】：2018-01-13 04:48:47
【问题描述】：

我在很多其他地方也看到过这个问题，但出于某种原因，无论我做什么，绑定或声明不同，我都会收到相同的错误，即 _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>

我有构造函数（道具）{ 超级（道具）

在顶部。有什么想法吗？

【问题讨论】：

标签： function reactjs components

【解决方案1】：

您的父组件中的函数是_toggleScreen() {}，但是您将 this.toggleScreen 而不是 this._toggleScreen 传递到您的 Categories 组件中。这是导致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>
    );
  }

【讨论】：

【解决方案2】：

我实际上需要将函数传递给两个孩子，我完全忘记了我正在渲染 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>
    );
  }
}

【讨论】：

【解决方案3】：

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

将 onPress 更改为 onClick，它应该可以工作。这是一个代码，onClick 工作得很好。 https://codesandbox.io/s/93ZyOWl8

【讨论】：

我正在使用支持 onPress 的 react native