Не могу применить бутстрап, чтобы среагировать (неверный тип)

Question

Я не могу применить Bootstrap к своему проекту.

import {Button, Form, Label, Input, Modal, ModalBody} from 'react- 
bootstrap';

В моем index.html у меня есть ссылка на CDN. Я запутался, потому что импорт работал в очень похожем проекте, но с другими импортированными компонентами.

My render method 
render() {
      return (
        <div>
        ...
        <Modal name='modal' isOpen={this.state.showModal}> 
          <ModalBody>
             Please add a popup for a location.
              <Form name="form">
            <Label for="Popup">Popup</Label>
            <Input type="text" name="popup" id="popup" placeholder="Popup"/> 
            <Button bsStyle="primary" type="submit"
            onClick={(e)=>this.submit(e)}>Add</Button>
             </Form>
         </ModalBody></Modal>
        </div>
      )
    }
  }

Мой импорт в компонент MapComponent

    import React, {Component} from 'react';
    import {Button,  Form, Label,  Input, Modal, ModalBody} from 'react- 
     bootstrap';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet'

Мой импорт в компонент приложения

import 'babel-polyfill';
import ReactDOM from 'react-dom';
import React from 'react';
import { Router, Route, hashHistory } from 'react-router';
import MapComponent from './MapComponent.jsx';
import styles from '../../css/styles.css';

Предупреждение: React.createElement: тип недействителен - ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: undefined. Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию с именованным импортом.

Проверьте метод рендеринга MapComponent. в MapComponent (создан RouterContext) в RouterContext (создан маршрутизатором) в роутере (создается приложением) в приложении

Answer 1

Используя ссылку CDN, вы не можете импортировать такие модули, как

import {Button, Form, Label, Input, Modal, ModalBody} from 'react- 
bootstrap';

Вам необходимо установить react-bootstrap.

npm install react-bootstrap --save

или

yarn add react-bootstrap

Обновление

Вы импортируете {Button, Form, Label, Input, Modal, ModalBody} из react-bootstrap, но используете модальный код reactstrap,

import {Button, Form, Label, Input, Modal, ModalBody} from 'react-bootstrap';

Это код для reactstrap модальный

<Modal name='modal' isOpen={this.state.showModal}> 
          <ModalBody>
             Please add a popup for a location.
              <Form name="form">
            <Label for="Popup">Popup</Label>
            <Input type="text" name="popup" id="popup" placeholder="Popup"/> 
            <Button bsStyle="primary" type="submit"
            onClick={(e)=>this.submit(e)}>Add</Button>
             </Form>
         </ModalBody></Modal>

Вы можете изменить свой импорт, чтобы ваш код работал

import {Button, Form, Label, Input, Modal, ModalBody} from 'reactstrap';

ИЛИ

Если вы хотите использовать react-bootstrap модальный, тогда это код для модального

<Modal.Dialog>
  <Modal.Header closeButton>
    <Modal.Title>Modal title</Modal.Title>
  </Modal.Header>

  <Modal.Body>
    <p>Modal body text goes here.</p>
  </Modal.Body>

  <Modal.Footer>
    <Button variant="secondary">Close</Button>
    <Button variant="primary">Save changes</Button>
  </Modal.Footer>
</Modal.Dialog>