reactjs + webpack + babel 7语法错误:销毁时,rest元素必须是最后一个元素 [英] reactjs + webpack + babel 7 Syntax error: The rest element has to be the last element when destructing
问题描述
我正在做一个开发版本,但是我遇到了Babel错误.我不确定要为此安装哪个模块/插件.任何指针将不胜感激.
I am doing a dev build and I'm getting below babel error. I'm not sure which module/plugin to install for this. Any pointers would be greatly appreciated.
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中使用的代码
Code used in the file /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文件
Webpack.config.js file
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文件
.babelrc file
{
"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插件/模块可以解决此问题?
I could'nt find much relevant information in the internet that addresses this problem. Any pointers of where I could have gone wrong ? Is there any babel plugin/module to be installed to get this fixed?
推荐答案
就像错误消息所言,将...props
作为最后一个元素:
Just like the error message says, move ...props
as the last element:
const DisplayList = ({ children, ...props }) => (...)
这篇关于reactjs + webpack + babel 7语法错误:销毁时,rest元素必须是最后一个元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!