由于您没有在类方法中使用 React.createClass ，因此 this 不引用组件实例，因此您应该手动绑定它。有几种方法：

1. 在类构造函数中手动绑定 this

constructor(props) {
    super(props);
    this.sportsCornerPanel= this.sportsCornerPanel.bind(this);
}

2. 使用带有箭头函数的 ES7 属性初始化器

sportsCornerPanel = () => {
    debugger;

    console.log("sportsCornerPanel"
    console.log("this.props.sportsPanelState.size-->" + this.props);

    if (this.props.sportsPanelState.size === 'hidden') {

        if (!this.props.sportsPanelState.visible) {
            this.props.dispatch(sportsOpenPanel());
        } else {
            this.props.dispatch(sportsClosePanel());
        }
    }
}

3. 在调用站点绑定 this

在 render() 方法中：

    let sportsContent, leftNavLink;

    if (this.props.sports-layout !== 'small') {
        console.log("SportsBox---page loads at bigger size");
        console.log("SportsBox---page loads at ipad size");
        sportsContent = <SportsBox className="sports-header"/>;
    } else {
        if (this.props.sportsPanelState.visible) {
            console.log("sportsPanelState--when it becomes small--around ipad width");

            sportsContent = <SportsBox className="sports-nav"/>;
            leftNavLink = <a onClick={this.sportsCornerPanel.bind(this)} href="javascript:;" className="header-navLink active"></a>;
        } else {
            if (this.props.sports.active) {

                console.log("SportsBox");

                sportsContent = <SportsBox className="sports-nav"/>;
            } else {

                console.log("leftNavLink--when it becomes small--around ipad width");

                leftNavLink = <a onClick={this.sportsCornerPanel.bind(this)} href="javascript:;" className="header-navLink"></a>;
            }
        }
    }

在构造函数中声明一个局部变量以捕获上下文。

使用 class className extends React.Component 而不是 createClass() 时，我遇到了同样的问题。在构造函数中创建一个变量来解决这个问题。

constructor(props) {
    super(props);
    self = this;
}

在任何地方都使用 self.props 而不是 this.props ！

看起来您的 React 组件上可能缺少 getDefaultProps 方法。您可以考虑使用类似这样的通用方法，只是为了消除错误并查看还有什么问题：

getDefaultProps () { return {};