ReactJS功能组件渲染错误

Question

我使用const Component = (props) => <div>asdasdasd</div>类的功能组件。 我不明白为什么会中断...当我渲染我的应用程序时，控制台出现此错误：

这是源代码：

 import React from 'react' import PropTypes from 'prop-types' import withStyles from 'react-jss' import classNames from 'classnames' const Words = ({type, classes, children}) => { switch (type) { case 'h1': return <h1 className={classNames(classes.h1, classes.resetMargins)}>{children}</h1> case 'h2': return <h2 className={classNames(classes.h2, classes.resetMargins)}>{children}</h2> case 'h3': return <h3 className={classNames(classes.h3, classes.resetMargins)}>{children}</h3> case 'h4': return <h4 className={classNames(classes.h4, classes.resetMargins)}>{children}</h4> case 'h5': return <h5 className={classNames(classes.h5, classes.resetMargins)}>{children}</h5> case 'h6': return <h6 className={classNames(classes.h6, classes.resetMargins)}>{children}</h6> case 'paragraph': return <p className={classNames(classes.p, classes.resetMargins)}>{children}</p> default: return <p className={classNames(classes.p, classes.resetMargins)}>{children}</p> } } const styles = (theme) => ({ resetMargins: { margin: 0, padding: 0 }, h1: { fontSize: theme.fontSize.h1, marginBottom: 30 }, h2: { fontSize: theme.fontSize.h2, marginBottom: 30 }, h3: { fontSize: theme.fontSize.h3, marginBottom: 20 }, h4: { fontSize: theme.fontSize.h4, marginBottom: 20 }, h5: { fontSize: theme.fontSize.h5, marginBottom: 20 }, h6: { fontSize: theme.fontSize.h6, marginBottom: 20 }, p: { fontSize: theme.fontSize.paragraph, marginBottom: 20 } }) Words.propTypes = { type: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'paragraph']) } export default withStyles(styles)(Words) 

我就像import Words from './words/Words.js'一样导入它

并使用如下形式： <Words type='paragraph'>asd321</Words>

我做错了什么？ 因为在webpack我有这个：

没有此组件，一切正常。 由类制造的组件工作良好，没有错误，但是对于功能组件，我有一个错误

WEBPACK.CONFIG：

 const path = require('path') const webpack = require('webpack') const HtmlWebPackPlugin = require("html-webpack-plugin"); module.exports = { entry: { app: ['@babel/polyfill', './src/index.js'] }, module: { rules: [ { test: /\\.css?$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, ] }, { test: /\\.(js|jsx)?$/, exclude: /node_modules/, use: ['react-hot-loader/webpack'], }, { test: /\\.(js|jsx)$/, exclude: /node_modules/, include: path.join(__dirname, 'src'), loader: require.resolve('babel-loader'), }, { test: /\\.(js|jsx)$/, loader: 'prettier-loader', exclude: /node_modules/, options: require('./prettier.config') }, { test: /\\.(jpe?g|png|gif)$/, use: [{ loader: 'url-loader', options: { limit: 10000 } }] }, { test: /\\.(eot|svg|ttf|woff2?|otf)$/, use: 'file-loader' } ] }, resolve: { extensions: ['*', '.js', '.jsx', '.css'], alias: { '@components': path.resolve(__dirname, './src/components'), '@common': path.resolve(__dirname, './src/common'), '@containers': path.resolve(__dirname,'./src/containers'), '@routes': path.resolve(__dirname, './src/routes'), '@styleguide': path.resolve(__dirname, './styleguide'), '@assets': path.resolve(__dirname, './src/assets') } }, output: { path: path.resolve(__dirname, 'target'), filename: '[name].js' }, plugins: [ new webpack.ProvidePlugin({ R: 'ramda' }), new HtmlWebPackPlugin({ filename: "index.html", template: "public/index.html" }), ], devServer: { contentBase: path.join(__dirname, './target'), port: 3131 } } 

.babelrc

 { "presets": [ [ "@babel/preset-env", { "useBuiltIns": "usage", "debug": true } ], "@babel/preset-react" ], "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-object-rest-spread", "@babel/plugin-transform-react-jsx", "@babel/plugin-syntax-dynamic-import", "@babel/plugin-transform-arrow-functions", "react-hot-loader/babel" ] } 

Answer 1

对不起。 我找到了解决方法。 它在webpack / babel-loader中。 因为我包括src目录，而我的Word组件不在src之外