javascript - 如何在React中导入Bootstrap组件？

Question

我正在尝试在 React 中集成来自 bootstrap 或 reactstrap 的复选框。我遇到了一个常见错误，请查看 relevant posts ，还是想不通。如何修复此错误:

Error Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

错误来源

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

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 新手。]

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