无法应用引导程序做出反应（类型无效）

Question

我无法将 Bootstrap 应用到我的项目中。

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

在我的 index.html 中，我有一个指向 CDN 的链接。 我很困惑，因为 import 在非常相似的项目中工作，但使用了另一个导入的组件。

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'

我对 App 组件的导入

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：类型无效 - 应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查MapComponent的渲染方法。 在 MapComponent 中（由 RouterContext 创建） 在RouterContext（由Router创建） 在Router中（由App创建） 应用内

Answer 1

使用CDN 链接，您无法导入类似的模块，

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

你需要安装react-bootstrap。

npm install react-bootstrap --save

或

yarn add react-bootstrap

更新

您正在从react-bootstrap 导入{Button, Form, Label, Input, Modal, ModalBody}，但您正在为您的模态使用reactstrap 代码，

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

这是reactstrap modal 的代码

<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 那么这是modal的代码

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