反应：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象

Question

我正在学习 React 并且遇到了这个错误

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象。

我已经检查了与类似错误相关的所有先前问题，但无法找出问题所在。 这是我的代码：

import React from 'react'
import classes from './BuildControls.css'
import BuildControl from './BuildControl/BuildControl.css'

const controls = [
    {label: 'Salad',type: 'salad'},
    {label: 'Bacon',type: 'bacon'},
    {label: 'Cheese',type: 'cheese'},
    {label: 'Meat',type: 'meat'},
];

const buildControls = (props) => (
    <div className={classes.buildControls}>
        {controls.map(ctrl => (
            <BuildControl 
                key={ctrl.label} 
                label={ctrl.label}
                added={() => props.ingredientAdded(ctrl.type)}
                 />
        ))}       
    </div>
);

export default buildControls;

这是包含错误的文件。 提前致谢

Answer 1

您正在将 BuildControl样式表作为BuildControl导入并尝试使用它来创建 BuildControl 元素。 您需要import BuildControl from './BuildControl/BuildControl.jsx' （假设这是您的组件的文件名和位置）。

要在父组件内渲染子组件，您需要导入子组件的 JS 文件。

作为旁注，通常的做法是在命名组件时始终使用pascal 大小写（例如，“BuildControls”）。