React子组件调用父组件函数报错：this.props.toggle()不是函数

这种问题我之前也踩过坑，大概率是prop名称不匹配或者函数绑定的问题，咱们一步步排查解决：

1. 优先检查Prop名称是否完全一致 #

你父组件里的函数叫toggleCallModel，但子组件里调用的是this.props.toggle()——这几乎是最常见的问题根源！

父组件传递函数给子组件时，必须保证子组件接收的prop名称和调用的名称完全对应：

• 如果子组件里要调用this.props.toggle()，那父组件传递的时候得写成：

// 父组件render方法内
<你的子组件名称 toggle={this.toggleCallModel} />

• 要是父组件传递的是toggleCallModel={this.toggleCallModel}，那子组件里就得改成this.props.toggleCallModel()，不能随便换名字哦。

2. 确认父组件函数的this绑定正确 #

虽然你说父组件内部调用正常，但还是要确认下toggleCallModel的this有没有绑定好——如果是普通函数定义，必须绑定this才能在子组件里正常调用：

方法一：在构造器里手动bind #

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    // 绑定this到当前组件实例
    this.toggleCallModel = this.toggleCallModel.bind(this);
  }

  toggleCallModel() {
    // 你的弹窗切换逻辑
  }
}

方法二：用箭头函数定义class fields（推荐） #

箭头函数会自动绑定当前组件的this，不用手动bind，代码更简洁：

class ParentComponent extends React.Component {
  // 箭头函数自动绑定this
  toggleCallModel = () => {
    // 你的弹窗切换逻辑
  }
}

3. 检查子组件的结构是否正确 #

确保你的子组件是类组件（因为你用了this.props），而且正确继承了React.Component，补全后的子组件示例如下：

import React from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; // 补全你没写完的import

class ChildDialog extends React.Component {
  handleClose = () => {
    // 确保这里调用的prop名称和父组件传递的一致
    this.props.toggle();
  }

  render() {
    const actions = [
      <FlatButton label="关闭" onClick={this.handleClose} />
    ];

    return (
      <MuiThemeProvider>
        <Dialog actions={actions} open={this.props.isOpen}>
          弹窗内容
        </Dialog>
      </MuiThemeProvider>
    );
  }
}

export default ChildDialog;

最后排查小细节 #

• 检查拼写：有没有把toggle写成toggel之类的低级错误？
• 如果子组件是函数组件，不要用this.props，直接用props.toggle()

内容的提问来源于stack exchange，提问作者Parth Soni