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

对不起。我找到了soulution。它是在webpack / babel-loader中。因为我包含src目录，我的Word组件在src之外