1
不工作我試圖使用react.js使用getDefaultProps方法下面的例子中,我發現它不工作對我來說: HTML:getDefaultProps使用reactjs
<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);
任何人都可以告訴我在那裏我在這裏失蹤。
你的意思'ReactDOM.render'?你的'App'組件也返回'this.props.headings',但你永遠不會使用它?此外,您的代碼難以閱讀。你是從哪裏得到這個空間的東西? – azium
您已在應用程序中定義了getDefaultProps,但從未使用它。 –
我嘗試了所有方法來閱讀getDefaultProps,但它在這裏不適合我。任何代碼示例都會幫助我。 –