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

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 文件。

作为旁注，在命名组件时总是使用帕斯卡大小写（例如，“BuildControls”）是一种常见的做法。