getDefaultProps无法使用reactjs

我正在尝试使用react.js为下面的示例使用getDefaultProps方法，但我发现它不适合我： HTML:

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

var RecentChangesTable=React.createClass({
render:function（）{
返回（{
这是道具
}）；
}
});
RecentChangesTable.Heading=React.createClass({
render:function（）{
var headingStyle={
背景颜色：“FloralWhite”，
字体大小：“19px”
};
返回{
这是道具
}；
}
});
RecentChangesTable.Headings=React.createClass({
render:function（）{
var headers=this.props.headers.map（函数（名称、索引）{
返回
});
返回{
标题
}
}
});
RecentChangesTable.Row=React.createClass({
render:function（）{
变量trStyle={
背景颜色：“aliceblue”
}
返回
{
this.props.changeSet.when
}{
这个。道具。变更集。谁
}{
this.props.changeSet.description
}
}
});
RecentChangesTable.Rows=React.createClass({
render:function（）{
var rows=this.props.changeSets.map（函数（变更集，索引）{
返回（);
});
返回（{
排
}）
}
});
var App=React.createClass({
getDefaultProps:function（）{
返回{
标题：[“何时发生”、“谁做的”、“他们改变了什么”]
};
},
render:function（）{
返回（
）；
}
});
风险值数据=[{
“时间”：“2分钟前”，
“谁”：“吉尔·杜普”，
“说明”：“已创建新帐户”
}, {
“时间”：“1小时前”，
“谁”：“失去白人”，
“说明”：“增加了第一章”
}];
变量标题=['When'，'Who'，'Description']；
变量props={
标题：标题，
变更集：数据
};
React.render（，文件正文）；

---

有人能告诉我这里缺少什么吗。

我更新了下面提到的代码，它对我起了作用：

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'));

var RecentChangesTable=React.createClass({
render:function（）{
返回（{
这是道具
}）；
}
});
RecentChangesTable.Heading=React.createClass({
render:function（）{
var headingStyle={
背景颜色：“FloralWhite”，
字体大小：“19px”
};
返回{
这是道具
}；
}
});
RecentChangesTable.Headings=React.createClass({
render:function（）{
var headers=this.props.headers.map（函数（名称、索引）{
返回
});
返回{
标题
}
}
});
RecentChangesTable.Row=React.createClass({
render:function（）{
变量trStyle={
背景颜色：“aliceblue”
}
返回
{
this.props.changeSet.when
}{
这个。道具。变更集。谁
}{
this.props.changeSet.description
}
}
});
RecentChangesTable.Rows=React.createClass({
render:function（）{
var rows=this.props.changeSets.map（函数（变更集，索引）{
return（);
});
返回（{
排
}）
}
});
var App=React.createClass({
getDefaultProps:function（）{
返回{
标题：[“何时发生”、“谁做的”、“他们改变了什么”]
};
},
render:function（）{
返回（
）；
}
});
风险值数据=[{
“时间”：“2分钟前”，
“谁”：“吉尔·杜普”，
“说明”：“已创建新帐户”
}, {
“时间”：“1小时前”，
“谁”：“失去白人”，
“说明”：“增加了第一章”
}];
变量标题=['When'，'Who'，'Description']；
变量props={
//标题：标题，
变更集：数据
}; 
render（，
document.getElementById（'container'）；

你是说

ReactDOM.render

？您的

应用程序

组件也会返回

此.props.headers

，但您从未使用过它吗？而且你的代码非常难读。你是从哪里得到这样的想法的？你已经在应用程序中定义了getDefaultProps，但从未使用过它。我尝试了各种方法来阅读getDefaultProps，但在这里它对我不起作用。任何代码示例都可以帮助我。

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'));