Uncaught TypeError:无法读取null的属性'props'

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (54)
  • 我有一个反应代码
  • 此代码呈现UI中的各种面板。
  • 当我点击标签时,这个函数被称为sportsCornerPanel()
  • 但我正在获取Uncaught TypeError如何解决它
  • 在下面提供代码片段代码。
  • 整个代码你可以在小提琴中看到它

代码片段

    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());
            }
        }
    }


    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} 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} href="javascript:;" className="header-navLink"></a>;
                }
            }
        }


output

Uncaught TypeError: Cannot read property 'props' of null
提问于
用户回答回答于

由于您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>;
            }
        }
    }
用户回答回答于

看起来你可能getDefaultProps在你的React组件中缺少一个方法。你可能会认为这是一个通用的东西,只是为了消除错误,看看还有什么是:

getDefaultProps () { return {}; }

所属标签

可能回答问题的人

  • gulu丶咕噜

    0 粉丝1 提问5 回答
  • 华讯云

    0 粉丝0 提问4 回答
  • EatRice

    16 粉丝0 提问4 回答
  • 发条丶魔灵1

    9 粉丝526 提问3 回答

扫码关注云+社区

领取腾讯云代金券