javascript - reactjs + webpack + babel 7 语法错误:销毁时其余元素必须是最后一个元素
问题描述
我正在做一个开发构建,我正在低于 babel 错误。我不确定为此安装哪个模块/插件。任何指针将不胜感激。
ERROR in ./src/_components/display/DisplayList.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /src/_components/display/DisplayList.jsx: The rest element has to be the last element when destructing (15:23)
13 | };
14 |
> 15 | const DisplayList = ({ ...props, children }) => {
| ^
16 | const { classes } = props;
17 | console.log(props.data)
18 | return (
文件 /src/_components/display/DisplayList.jsx 中使用的代码
import React from 'react';
import PropTypes from 'prop-types';
import { Typography, withStyles, List } from '@material-ui/core';
const listStyle = {
heading: {
textAlign: 'center',
color: '#FFF',
backgroundColor: '#383733',
padding: 10,
marginBottom: 5,
}
};
const DisplayList = ({ ...props, children }) => {
const { classes } = props;
console.log(props.data)
return (
<div>
<Typography className={classes.heading}>
{props.title}
</Typography>
{children &&
children.map((child, key) => {
return (
<React.Fragment key={key}>
{child}
</React.Fragment>
)
})}
</div>
)
}
DisplayList.propTypes = {
title: PropTypes.string.isRequired
}
export default withStyles(listStyle)(DisplayList);
Webpack.config.js 文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
resolve: {
extensions: ['.js', '.jsx'],
},
devtool: 'cheap-module-source-map',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
},
],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
}
.babelrc 文件
{
"presets": [
"@babel/env", "@babel/react"
],
"plugins": [
"@babel/proposal-class-properties",
"@babel/transform-react-inline-elements",
"@babel/transform-react-constant-elements",
"@babel/proposal-object-rest-spread",
"@babel/transform-spread"
]
}
我在互联网上找不到很多解决这个问题的相关信息。有什么指示我可能出错的地方吗?有没有要安装的 babel 插件/模块来解决这个问题?
解决方案
就像错误消息说的那样,...props
作为最后一个元素移动:
const DisplayList = ({ children, ...props }) => (...)
推荐阅读
- dax - Power BI Measure 计算开始月份(一月)和所选期间最后一个月之间的差异?粒度按月计算
- pandas - ValueError:无法将字符串转换为浮点数:'n/a'
- react-native - 通知已恢复但未显示飞艇 React Native
- javascript - 如何使用 JQuery 对表格列进行升序和降序排序?
- vue.js - VueJs - 在 v-select 之后包含一个按钮
- rally - Rally API - 仅获取用户故事的更新
- docker - 使用 docker 安装 swipl
- typescript - 在 Typescript 中使用 allowJs 选项使用 JS 时,如何将对象属性用作可选?
- laravel - Laravel找到具有差异条件的同一列之和的差异
- python - 如何在保持比例的同时使我的玩家图像在碰撞时更大?