Как импортировать Bootstrap компонентов в React?

Question

Я пытаюсь установить флажки из bootstrap или reactstrap в React. Я получаю общую ошибку, просмотрел соответствующих сообщений , но до сих пор не могу понять. Как исправить эту ошибку:

Тип элемента ошибки недопустим: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена.

Источник ошибки

Проблема должна быть здесь, в этих две строки, которые я не уверен, что это такое.

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>

Демо

[Спасибо! Я новичок в React.]

Answer 1

В вашем компоненте у вас верблюд inputGroupAddOn при объявлении типов реквизита. Когда вы импортировали его, вы не верблюжьей надстройки, вы импортируете InputGroupAddon. Это может быть еще одна проблема у вас.

Answer 2

prepend - это одно значение addonType реквизита InputGroupAddOn или InputGroupButton. это не свойство InputGroup импорта. 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
};