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”）。

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

1 个答案: