My .js file is:-
var React = require('react');
export default class AmortizationChart extends React.Component {
render() {
var items = this.props.data.map(function (year, index) {
return (
<tr key={index}>
<td>{index + 1}</td>
<td className="currency interest">{Math.round(year.interestY).toLocaleString()}</td>
<td className="currency">{Math.round(year.balance).toLocaleString()}</td>
</tr>
);
});
Now same I can Write also in .jsx file.So what is the difference which file I sould take .js or .jsx?
This bit is JSX:
<tr key={index}>
<td>{index + 1}</td>
<td className="currency interest">{Math.round(year.interestY).toLocaleString()}</td>
<td className="currency">{Math.round(year.balance).toLocaleString()}</td>
</tr>
This only works because you're loading your .js file as text/babel
. Try it with text/javascript
and you'll get the following error:
Uncaught SyntaxError: Unexpected token <
React's own documentation has a good article on JSX here: JSX In Depth .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.