Javascript 如何在React中导入引导组件？

我试图在React中集成来自

bootstrap

或

reactstrap

的复选框。我发现了一个常见的错误，经过调查，仍然无法找出它。如何修复此错误：

错误元素类型无效：应为字符串（对于内置 组件）或类/函数（用于复合组件），但得到： 未定义。您可能忘记了从文件中导出组件 它是在中定义的，或者您可能混淆了默认导入和命名导入

误差源 问题应该在这两行，我不确定这是什么

import { InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
import FormControl from 'react-bootstrap/FormControl';

如果我们删除这些行和下面复制的HTML，它不会给出任何错误

HTML

---

[谢谢！我是新手。]

prepend

是InputGroupAddOn或InputGroupButton的

addonType

属性的一个值。它不是

InputGroup

import的属性

InputGroup.Prepend

未定义，这就是React抱怨的原因

根据，您希望：

InputGroupAddOn.propTypes = {
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
  className: PropTypes.string
};

InputGroupButton.propTypes = {
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
  children: PropTypes.node,
  groupClassName: PropTypes.string, // only used in shorthand
  groupAttributes: PropTypes.object, // only used in shorthand
  className: PropTypes.string
};

---

在您的组件中，当声明道具类型时，您可以使用case

inputGroupAddOn

。当您导入它时，您没有将其作为加载项部件，而是导入了

InputGroupAddon

。这可能是您遇到的另一个问题。

从您的沙箱中删除对

FormControl

的所有引用仍然会产生相同的错误。您确定错误与该导入对应吗？

InputGroupAddOn.propTypes = {
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
  className: PropTypes.string
};

InputGroupButton.propTypes = {
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
  children: PropTypes.node,
  groupClassName: PropTypes.string, // only used in shorthand
  groupAttributes: PropTypes.object, // only used in shorthand
  className: PropTypes.string
};