Refactoring getDefaultProps zu ES6 ... was ist falsch mit meinem Code?

Question

Ich habe die folgende React.createClass bekam und ich würde es gerne extends React.Component eine weitergeben müssen:

var Rect = React.createClass({ 
     getDefaultProps: function() { 
      return { 
       width: 0, 
       height: 0, 
       x: 0, 
       y: 0 
      } 
     }, 

     render: function() { 
      return (
       <rect className="bar" 
        height={this.props.height} 
        y={this.props.y} 
        width={this.props.width} 
        x={this.props.x} 
       > 
       </rect> 
      ); 
     }, 
    }); 

ich einen Schuss geben, aber es funktioniert nicht:

class Rect extends React.Component { 
    constructor(props) { 
     super(props); 
    } 
    render() { 
     return (
      <rect className="bar" 
       height={this.props.height} 
       y={this.props.y} 
       width={this.props.width} 
       x={this.props.x} 
      > 
      </rect> 
     ); 
    } 
    Rect.defaultProps = { 
      width: 0, 
      height: 0, 
      x: 0, 
      y: 0 
    } 
}; 

Also, was ist los?

Answer 1

Die defaultProps Definition muss außerhalb der Klassendefinition in diesem Fall:

class Rect extends React.Component { 
    constructor(props) { 
     super(props); 
    } 
    render() { 
     return (
      <rect className="bar" 
       height={this.props.height} 
       y={this.props.y} 
       width={this.props.width} 
       x={this.props.x} 
      > 
      </rect> 
     ); 
    } 
}; 
Rect.defaultProps = { 
     width: 0, 
     height: 0, 
     x: 0, 
     y: 0 
}