时间戳

首页 > 解决方案 > 如何在 Sails 应用程序中编译 jsx 代码？

reactjs - 如何在 Sails 应用程序中编译 jsx 代码？

问题描述

我正在尝试将我的 Sails 项目设置为在前端使用 Ant Design，但在引用我的 javascript 文件时出现错误。我在导入语句中遇到错误，我可以通过将 type='module' 属性添加到脚本标记来修复，但是一旦修复，我的 jsx 代码就会出现错误，因为浏览器不理解 <。我对javascript堆栈相当陌生，所以提前抱歉。

我试过配置 Babel 和 Webpack，但是很多指南都已经过时了，我越来越困惑。下面链接的是我的 js 文件，它直接取自 antd 组件示例以及 html 代码。我添加了脚本标签来引用 js 文件。

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { Table, Divider, Tag } from 'antd';

const columns = [
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: tags => (

* Error Thrown Here *
      <span>
        {tags.map(tag => {
          let color = tag.length > 5 ? 'geekblue' : 'green';
          if (tag === 'loser') {
            color = 'volcano';
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </span>
    ),
  }
];

const data = ...

ReactDOM.render(<Table columns={columns} dataSource={data} />, document.getElementById('container'));

<-- HTML -->

<div id="container" style="padding: 24px"></div>
<script>
  var mountNode = document.getElementById('container');
</script>
<script type='module' src='templates/table.js'></script>

我希望 js 代码构建一个数据表并将所有 jsx 编译为浏览器可以解释的 es6 代码。但是，我在 jsx 代码上遇到错误，我不相信正在编译任何代码。

标签： reactjsgruntjssails.jsbabeljsantd

解决方案

推荐阅读