Javascript 如何解决react中的元素类型无效错误

我是新的反应，我试图返回一个通用的按钮组件。该按钮应显示三个不同图标中的一个，即“DeleteIcon”、“AddIcon”或“EditIcon”。指定的按钮类型在IconButton函数的输入中指定为“buttonType”

然而，我不断得到“react dom.development.js:24036未捕获不变冲突：元素类型无效：应为字符串”-错误

代码如下：

import React from 'react';
import Button from '@material-ui/core/Button';
import DeleteIcon from '@material-ui/icons/Delete';
import AddIcon from '@material-ui/icons/Add';
import EditIcon from '@material-ui/icons/Edit';

export default function IconButton({ handler, text, color, fill, buttonType }) {
  let Icon;

  switch (buttonType) {
    case 'DeleteIcon':
      Icon = <DeleteIcon />;
      break;
    case 'AddIcon':
      Icon = <AddIcon />;
      break;
    case 'EditIcon':
      Icon = <EditIcon />;
      break;
    default:
      return null;
  }

  return (
    <Button onClick={handler} variant={fill ? 'contained' : 'outlined'} color={color}>
      <Icon />
      {text}
    </Button>
  );
}

从“React”导入React；
从“@material ui/core/Button”导入按钮；
从“@material ui/icons/Delete”导入DeleteIcon；
从“@material ui/icons/Add”导入AddIcon；
从“@material ui/icons/Edit”导入EditIcon；
导出默认函数IconButton（{处理程序、文本、颜色、填充、按钮类型}）{
让图标；
开关（按钮式）{
“DeleteIcon”案例：
图标=；
打破
案例“AddIcon”：
图标=；
打破
案例“编辑图标”：
图标=；
打破
违约：
返回null；
}
返回(
{text}
);
}

从“React”导入React；
从“../components/GithubComponent”导入GithubComponent；
从“../components/buttons/IconButton”导入IconButton；
从“../components/buttons/Button”导入按钮；
常数着陆页=（）=>(
);
导出默认登陆页面；

---

谢谢大家!

图标

已经保存了

元素

，只需渲染它即可

有关

JSX

幕后活动的更多信息，请参阅

此外，您还可以使用对象将

buttonType

映射到组件：

const ICONS = {
  'DeleteIcon': <DeleteIcon />,
  'AddIcon': <AddIcon />,
  'EditIcon': <EditIcon />
}

export default function IconButton({ handler, text, color, fill, buttonType }) {
  return (
    <Button onClick={handler} variant={fill ? 'contained' : 'outlined'} color={color}>
      {ICONS[buttonType]}
      {text}
    </Button>
  );
}

const图标={
“删除图标”：，
“附加条款”：，
“编辑图标”：
}
导出默认函数IconButton（{处理程序、文本、颜色、填充、按钮类型}）{
返回(
{图标[按钮类型]}
{text}
);
}

---

导出默认函数IconButton（{handler，text，color，fill，buttonType}）{
让图标；
开关（按钮式）{
//图标=。。。
}
返回(
//v渲染组件
{Icon}
{text}
);
}

您试图在已经是JSX的变量中使用JSX

改变

  return (
    <Button onClick={handler} variant={fill ? 'contained' : 'outlined'} color={color}>
      <Icon /> // Trying to render a component that is already a react element
      {text}
    </Button>
  );

返回(
//尝试呈现已是react元素的组件
{text}
);

到

返回(
{Icon}//呈现react元素
{text}
);

或者，您可以在开关中获取元素，然后使用JSX进行渲染

export default function IconButton({ handler, text, color, fill, buttonType }) {
  let Icon;

  switch (buttonType) {
    case 'DeleteIcon':
      Icon = DeleteIcon; // Only getting the Component
      break;
    case 'AddIcon':
      Icon = AddIcon; // Only getting the Component
      break;
    case 'EditIcon':
      Icon = EditIcon; // Only getting the Component
      break;
    default:
      return null;
  }

  return (
    <Button onClick={handler} variant={fill ? 'contained' : 'outlined'} color={color}>
      {Icon && <Icon />}  // You can pass any prop to the component here
      {text}
    </Button>
  );
}

导出默认函数IconButton（{handler，text，color，fill，buttonType}）{
让图标；
开关（按钮式）{
“DeleteIcon”案例：
Icon=DeleteIcon；//仅获取组件
打破
案例“AddIcon”：
Icon=AddIcon；//仅获取组件
打破
案例“编辑图标”：
Icon=EditIcon；//仅获取组件
打破
违约：
返回null；
}
返回(
{Icon&&}//您可以在此处将任何道具传递给组件
{text}
);
}

非常感谢您！你太棒了，我坐了好几个小时都没看到这个

  return (
    <Button onClick={handler} variant={fill ? 'contained' : 'outlined'} color={color}>
      <Icon /> // Trying to render a component that is already a react element
      {text}
    </Button>
  );

  return (
    <Button onClick={handler} variant={fill ? 'contained' : 'outlined'} color={color}>
      {Icon} // Rendering the react element
      {text}
    </Button>
  );

export default function IconButton({ handler, text, color, fill, buttonType }) {
  let Icon;

  switch (buttonType) {
    case 'DeleteIcon':
      Icon = DeleteIcon; // Only getting the Component
      break;
    case 'AddIcon':
      Icon = AddIcon; // Only getting the Component
      break;
    case 'EditIcon':
      Icon = EditIcon; // Only getting the Component
      break;
    default:
      return null;
  }

  return (
    <Button onClick={handler} variant={fill ? 'contained' : 'outlined'} color={color}>
      {Icon && <Icon />}  // You can pass any prop to the component here
      {text}
    </Button>
  );
}