javascript - Why console.log(super) in React Component constructor throw an Error? - Stack Overflow

admin管理员组

文章数量:1292076

I want to console the super in my InheritComponent constructor method. But in chrome console, it throw an Error. Why?

class BaseComponent extends React.Component{

    static defaultProps = {
        title: 'Learn React By Examples'
    }

    constructor(props) {
        console.log(props);
        super(props);
    }

    setTitle(title) {
        document.title = title || this.props.title;
        return document.title;
    }
}

class InheritComponent extends BaseComponent{
  
    state = {
      title: ''
    };

    constructor(props) {
        super(props);
        
        //here throw an Error. Why? I want to console.log `super`
        console.log(super);
    }

    ponentDidMount() {
        const title = this.setTitle('组件继承')
        this.setState({title});
    }

    render() {
        return <div>
            <p>I inherit BaseComponent</p>
            <p>current title is {this.state.title}</p>
            
        </div>
    }
}

ReactDOM.render(
  <InheritComponent />,
  document.body
)

<script src=".1.0/react.min.js"></script>
<script src=".1.0/react-dom.min.js"></script>

I want to console the super in my InheritComponent constructor method. But in chrome console, it throw an Error. Why?

class BaseComponent extends React.Component{

    static defaultProps = {
        title: 'Learn React By Examples'
    }

    constructor(props) {
        console.log(props);
        super(props);
    }

    setTitle(title) {
        document.title = title || this.props.title;
        return document.title;
    }
}

class InheritComponent extends BaseComponent{
  
    state = {
      title: ''
    };

    constructor(props) {
        super(props);
        
        //here throw an Error. Why? I want to console.log `super`
        console.log(super);
    }

    ponentDidMount() {
        const title = this.setTitle('组件继承')
        this.setState({title});
    }

    render() {
        return <div>
            <p>I inherit BaseComponent</p>
            <p>current title is {this.state.title}</p>
            
        </div>
    }
}

ReactDOM.render(
  <InheritComponent />,
  document.body
)

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

Above is my demo code.

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow asked Aug 15, 2016 at 6:22 Lin DuLin Du 103k135135 gold badges332332 silver badges564564 bronze badges 2

• i think you cant add anything before calling super, can you remove your console.log statement and try once? – Harkirat Saluja Commented Aug 15, 2016 at 7:47
• @HarkiratSaluja remove the console.log statement will work. But I want to console the super. And, my console.log statement is after the super(props) statement – Lin Du Commented Aug 15, 2016 at 8:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9 +50

Reason is simple: super is a keyword, not a function nor any variable. You cannot log super the same as you cannot log var or new keywords.

If you want to log the constructor of your parent, you can try:

console.log(super.constructor);

In fact, super() is just shorthand for super.constructor().

See more: https://developer.mozilla/pl/docs/Web/JavaScript/Reference/Operators/super

super is a keyword, you can't use it like a variable. The only allowed ways to use super are outlined in the MDN documentation for it:

super([arguments]); // calls the parent constructor.

super.functionOnParent([arguments]);

If you want to print the parent class, use console.log(super.constructor) instead.

本文标签： javascriptWhy consolelog(super) in React Component constructor throw an ErrorStack Overflow