无法找到.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 。