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

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 case（例如“BuildControls”）是一种常见的做法。