我正在进行开发构建,但遇到了 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 }) => (...)
关于javascript - Reactjs + webpack + babel 7 语法错误 : The rest element has to be the last element when destructing,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53475533/