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 is not a react SyntheticEvent https://facebook.github.io/react/docs/events.html

change onPress for onClick and it should work. here is a codesand with onClick working just fine. https://codesandbox.io/s/93ZyOWl8

Answer 2

父组件中的函数是_toggleScreen() {}，但是您将此.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作为propContent中的prop传递，然后传递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>
    );
  }
}

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

3 个答案: