javascript - 无法找到 .jsx 和 js 文件之间的真正区别

Question

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?

Answer 1

这个位是 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>

这仅在您将 .js 文件加载为 text/babel 时才有效。使用 text/javascript 尝试一下，您将收到以下错误:

Uncaught SyntaxError: Unexpected token <

React 自己的文档有一篇关于 JSX 的好文章:JSX In Depth .