如何在 React 中导入 Bootstrap 组件？答案

【问题标题】：How to import Bootstrap components in React?如何在 React 中导入 Bootstrap 组件？
【发布时间】：2020-07-02 19:17:29
【问题描述】：

我正在尝试在 React 中集成来自 bootstrap 或 reactstrap 的复选框。我遇到了一个常见错误，查看了relevant posts，仍然无法弄清楚。如何解决此错误：

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

错误来源

问题应该出在这两行，我不确定是什么问题。

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

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

HTML

          <div>
            <InputGroup className="mb-3">
              <InputGroup.Prepend>
                <InputGroup.Checkbox aria-label="Checkbox for following text input" />
              </InputGroup.Prepend>
              <FormControl aria-label="Text input with checkbox" />
            </InputGroup>
            <InputGroup>
              <InputGroup.Prepend>
                <InputGroup.Radio aria-label="Radio button for following text input" />
              </InputGroup.Prepend>
              <FormControl aria-label="Text input with radio button" />
            </InputGroup>
          </div>

Demo

[谢谢！我是 React 的新手。]

【问题讨论】：

从您的沙箱中删除对FormControl 的所有引用仍然给我同样的错误。您确定错误与该导入对应吗？

标签： javascript html css reactjs react-bootstrap

【解决方案1】：

prepend 是 InputGroupAddOn 或 InputGroupButton 的 addonType 属性的一个值。它不是 InputGroup 导入的属性。 InputGroup.Prepend 未定义，这就是 React 抱怨的原因。

根据the reactstrap docs，你想要这个：

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
};

【讨论】：

【解决方案2】：

在您的组件中，您在声明道具类型时使用驼峰式inputGroupAddOn。当您导入它时，您没有添加部分驼峰式，您正在导入InputGroupAddon。这可能是您遇到的另一个问题。

【讨论】：