Javascript ReactJS-React路由器从父组件调用嵌套组件中的函数

我正在尝试从父组件调用嵌套组件函数，但我继续将以下错误返回到控制台：

未捕获类型错误：this.props.handleTouchTap不是函数

我个人在与道具斗争，我想这是一个简单的错误来修复，但由于某种原因，我似乎无法明白我必须做什么

我想让我的代码执行以下操作： -当用户更新他们的信息时，在更新发布到Firebase后，我希望弹出一个material ui snackbar来说明这一点。 -我已经在子组件中声明了snackbar，它正在工作。我不能做的是从父组件切换控制snackbar的状态

反应路线：

ReactDOM.render((
  <Router history={hashHistory}>
    <Route component={Profile}>
      <Route path="/profile" component={Child} />
    </Route>
  </Router>
), document.getElementById("app"))

ReactDOM.render((
)，document.getElementById（“应用程序”））

子组件：

export default class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      message: "Update Successful!!",
    };
  }

  handleTouchTap(){
    this.setState({
      open: true,
    });
  };

  handleRequestClose(){
    this.setState({
      open: false,
    });
  };


  render() {
    return (
          <MuiThemeProvider muiTheme={muiTheme}>
            <div>
                <NavBar />
                <Drawer />
                <Snackbar
                  open={this.state.open}
                  message={this.state.message}
                  autoHideDuration={4000}
                  onRequestClose={this.handleRequestClose}
                />
            </div>
        </MuiThemeProvider>
    );
  }
}

export default React.createClass({
  getInitialState: function () {
    return {
      name: '',
      surname: '',
      address: '',
      phone: '',
      email: '',
    }
  },

  componentWillMount(){
    this.getUserDetails();
  },

  getUserDetails: function(){
    var personID = this.param('id'); 
    if(personID.length > 0){
      new Firebase('https://xxxxxxxxxxxxx.firebaseio.com/users/' + personID).on('value', function(snap) {
       this.setState({
          name: snap.val().Name,
          surname: snap.val().Surname,
          address: snap.val().Address,
          phone: snap.val().Phone,
          email: snap.val().Email
        });

      }.bind(this));
     }
  },

  updateDetails: function(){
    var personID = this.param('id'); 
    if(personID.length > 0){
      firebase.database().ref('users/' + personID).update({
          Name: this.state.name,
          Surname: this.state.surname,
          Address: this.state.address,
          Phone: this.state.phone,
          Email: this.state.email
      });
      this.props.handleTouchTap();
     }
  },

  render() {
    return (
      <div>
        <div>{this.props.children}</div>
         ....
        <Button bsStyle="primary" onClick={this.updateDetails}>Update</Button> 
         ....
         ...
      </div>
    );
  }
});

导出默认类子组件{
建造师（道具）{
超级（道具）；
此.state={
开：错，
消息：“更新成功！！”，
};
}
handleTouchTap（）{
这是我的国家({
开放：是的，
});
};
HandlerRequestClose（）{
这是我的国家({
开：错，
});
};
render（）{
返回(
);
}
}

父组件：

export default class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      message: "Update Successful!!",
    };
  }

  handleTouchTap(){
    this.setState({
      open: true,
    });
  };

  handleRequestClose(){
    this.setState({
      open: false,
    });
  };


  render() {
    return (
          <MuiThemeProvider muiTheme={muiTheme}>
            <div>
                <NavBar />
                <Drawer />
                <Snackbar
                  open={this.state.open}
                  message={this.state.message}
                  autoHideDuration={4000}
                  onRequestClose={this.handleRequestClose}
                />
            </div>
        </MuiThemeProvider>
    );
  }
}

export default React.createClass({
  getInitialState: function () {
    return {
      name: '',
      surname: '',
      address: '',
      phone: '',
      email: '',
    }
  },

  componentWillMount(){
    this.getUserDetails();
  },

  getUserDetails: function(){
    var personID = this.param('id'); 
    if(personID.length > 0){
      new Firebase('https://xxxxxxxxxxxxx.firebaseio.com/users/' + personID).on('value', function(snap) {
       this.setState({
          name: snap.val().Name,
          surname: snap.val().Surname,
          address: snap.val().Address,
          phone: snap.val().Phone,
          email: snap.val().Email
        });

      }.bind(this));
     }
  },

  updateDetails: function(){
    var personID = this.param('id'); 
    if(personID.length > 0){
      firebase.database().ref('users/' + personID).update({
          Name: this.state.name,
          Surname: this.state.surname,
          Address: this.state.address,
          Phone: this.state.phone,
          Email: this.state.email
      });
      this.props.handleTouchTap();
     }
  },

  render() {
    return (
      <div>
        <div>{this.props.children}</div>
         ....
        <Button bsStyle="primary" onClick={this.updateDetails}>Update</Button> 
         ....
         ...
      </div>
    );
  }
});

export default React.createClass({
getInitialState:函数（）{
返回{
名称：“”，
姓：''，
地址：''，
电话：''，
电子邮件：“”，
}
},
组件willmount（）{
此参数为.getUserDetails（）；
},
getUserDetails:函数（）{
var personID=this.param（'id'）；
如果（personID.length>0）{
新消防基地（'https://xxxxxxxxxxxxx.firebaseio.com/users/'+personID）.on（'value'，函数（捕捉）{
这是我的国家({
名称：snap.val（）.name，
姓氏：snap.val（）.姓氏，
地址：snap.val（）.address，
电话：snap.val（）.phone，
电子邮件：snap.val（）.email
});
}.约束（这个）；
}
},
updateDetails:function（）{
var personID=this.param（'id'）；
如果（personID.length>0）{
firebase.database（）.ref（'users/'+personID）.更新({
名称：this.state.Name，
姓：this.state.姓氏，
地址：this.state.Address，
电话：这个州的电话，
电子邮件：this.state.Email
});
this.props.handleTouchTap（）；
}
},
render（）{
返回(
{this.props.children}
....
更新
....
...
);
}
});

将

handleTouchTap

道具传递到

父组件的位置？如果
Profile
是您的父组件，那么您不会在任何地方传递此属性。@tiagohngl我在上面做了一个轻微的编辑，我忘了包含它。我假设我使用{this.props.children}将它传递给Profile，即父级。我建议您阅读React文档，您显然缺少一些核心概念。在进入复杂组件之前，请尝试了解
道具如何使用简单的示例。