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

【问题标题】：Not able to find real difference between .jsx and js file无法找到 .jsx 和 js 文件之间的真正区别
【发布时间】：2017-04-08 16:47:55
【问题描述】：

我的 .js 文件是：-

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>

                );

});

现在我也可以在 .jsx 文件中写入。那么有什么区别呢？我应该采用 .js 还是 .jsx 的文件？

【问题讨论】：

你可以在这里找到一个好的答案：stackoverflow.com/questions/27887678/…
这只是惯例。

标签： javascript reactjs

【解决方案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。

【讨论】：