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'

我导入到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创建）在路由器中（由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

更新

您正在从{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';

OR

如果您想使用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>

无法应用引导程序进行响应（类型无效）

1 个答案: