getDefaultProps не работает, используя reactjs

Question

Я пытаюсь использовать метод getDefaultProps для приведенного ниже примера с помощью react.js, и я нашел, что это не работает для меня: HTML:

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"> 
</script> 

<div id="container"> 
    <!-- This element's contents will be replaced with your component. --> 
</div> 

Javascript:

var RecentChangesTable = React.createClass({ 
    render: function() { 
    return (< table className = 'table' > { 
     this.props.children 
     } < /table>); 
    } 
    }); 

RecentChangesTable.Heading = React.createClass({ 
    render: function() { 
    var headingStyle = { 
     backgroundColor: 'FloralWhite', 
     fontSize: '19px' 
    }; 
    return <th style = { 
     headingStyle 
    } > { 
     this.props.heading 
    } < /th>; 
    } 
}); 

RecentChangesTable.Headings = React.createClass({ 
    render: function() { 
    var headings = this.props.headings.map(function(name, index) { 
     return <RecentChangesTable.Heading key = { 
     index 
     } 
     heading = { 
     name 
     } 
     /> 
    }); 
    return <thead > <tr> { 
     headings 
    } < /tr></thead > 
    } 
}); 

RecentChangesTable.Row = React.createClass({ 
    render: function() { 
     var trStyle = { 
     backgroundColor: 'aliceblue' 
     } 
     return <tr style = { 
      trStyle 
     } > 
     <td> { 
      this.props.changeSet.when 
     } < /td> <td> { 
     this.props.changeSet.who 
    } < /td> <td> { 
    this.props.changeSet.description 
    } < /td> </tr> 
} 
}); 

RecentChangesTable.Rows = React.createClass({ 
     render: function() { 
     var rows = this.props.changeSets.map(function(changeSet, index) { 
      return (< RecentChangesTable.Row key = { 
       index 
       } 
       changeSet = { 
       changeSet 
       } 
       />); 
      }); 
      return (<tbody> { 
       rows 
      } < /tbody>) 
      } 
     }); 



     var App = React.createClass({ 
     getDefaultProps: function() { 
      return { 
      headings: ['When happened ', 'Who did it', 'What they change'] 
      }; 
     }, 
     render: function() { 
      return (<RecentChangesTable> 
      < RecentChangesTable.Rows changeSets = { 
       this.props.changeSets 
      } 
      /> </RecentChangesTable>); 
     } 
     }); 


     var data = [{ 
     "when": "2 minutes ago", 
     "who": "Jill Dupre", 
     "description": "Created new account" 
     }, { 
     "when": "1 hour ago", 
     "who": "Lose White", 
     "description": "Added fist chapter" 
     }]; 

     var headings = ['When', 'Who', 'Description']; 
     var props = { 
     headings: headings, 
     changeSets: data 
     }; 

     React.render(< App changeSets = { 
      data 
     } 
     />, document.body); 

Может ли кто-нибудь сказать мне, что я здесь отсутствует.

Answer 1

Я обновил код, как указано ниже, и он работал на меня:

var RecentChangesTable = React.createClass({ 
    render: function() { 
    return (< table className = 'table' > { 
     this.props.children 
     } < /table>); 
    } 
    }); 

RecentChangesTable.Heading = React.createClass({ 
    render: function() { 
    var headingStyle = { 
     backgroundColor: 'FloralWhite', 
     fontSize: '19px' 
    }; 
    return <th style = { 
     headingStyle 
    } > { 
     this.props.heading 
    } < /th>; 
    } 
}); 

RecentChangesTable.Headings = React.createClass({ 
    render: function() { 
    var headings = this.props.headings.map(function(name,index) { 
     return <RecentChangesTable.Heading key={index} heading = { 
     name 
     } 
     /> 
    }); 
    return <thead > <tr> { 
     headings 
    } < /tr></thead > 
    } 
}); 

RecentChangesTable.Row = React.createClass({ 
    render: function() { 
     var trStyle = { 
     backgroundColor: 'aliceblue' 
     } 
     return <tr style = { 
      trStyle 
     } > 
     <td> { 
      this.props.changeSet.when 
     } < /td> <td> { 
     this.props.changeSet.who 
    } < /td> <td> { 
    this.props.changeSet.description 
    } < /td> </tr> 
} 
}); 

RecentChangesTable.Rows = React.createClass({ 
     render: function() { 
     var rows = this.props.changeSets.map(function(changeSet,index) { 
      return (< RecentChangesTable.Row key={index} changeSet = { 
       changeSet 
       } 
       />); 
      }); 
      return (<tbody> { 
       rows 
      } < /tbody>) 
      } 
     }); 



     var App = React.createClass({ 
       getDefaultProps:function(){ 
      return { 
      headings:['When happened','Who did it','What they change'] 
      }; 
     }, 

      render: function() { 
      return (<RecentChangesTable> 
       < RecentChangesTable.Headings headings = { 
       this.props.headings 
       } 
       /> < RecentChangesTable.Rows changeSets = { 
       this.props.changeSets 
      } 
      /> </RecentChangesTable>); 
     } 
     }); 

    var data = [{ 
     "when": "2 minutes ago", 
     "who": "Jill Dupre", 
     "description": "Created new account" 
    }, { 
     "when": "1 hour ago", 
     "who": "Lose White", 
     "description": "Added fist chapter" 
    }]; 

    var headings = ['When', 'Who', 'Description']; 
    var props = { 
     //headings: headings, 
     changeSets: data 
    }; 

    ReactDOM.render(< App {...props}/>, 
     document.getElementById('container'));