無法找到.jsx和js文件之間的真正區別

Question

我的.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文件有什么區別？

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 ，您將收到以下錯誤：

未捕獲到的SyntaxError：意外令牌<

React自己的文檔在JSX上有一篇不錯的文章： JSX In Depth 。