时间戳

首页 > 解决方案 > Babel反应jsx配置不起作用

reactjs - Babel反应jsx配置不起作用

问题描述

我在.bablerc中配置了 babel-plugin-transform-react- jsx

{
  "presets": [...],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ],
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }],
    "@babel/plugin-transform-react-jsx"
  ]
}

但是jsx设置AntD Table locale.emptyText时编译的代码失败（属性值可以是React.Node 或rc-table 中描述的Function ）

import { Table } in 'antd'
<Table
  locale={{ emptyText=<div><img src="..."></div> }}
>

错误：

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /path/to/page.js: Unexpected token (77:31)

  75 |             dataSource={dataSource}
  76 |             loading={false}
> 77 |             locale={{ emptyText=<div><img src=""></div> }}
     |                                ^

另一个，我知道如果写成函数它会起作用：

locale={{ emptyText: () => <div><img src=""></div> }}

标签： reactjsbabeljsantd

解决方案

您的代码中有错字， locale 属性需要一个对象，因此键值对由:而不是分隔=

locale={{ emptyText: <div><img src="..."></div> }}

应该管用

推荐阅读