React Bootstrap Modal - PullRequest
Новая
       36

React Bootstrap Modal

0 голосов
/ 20 октября 2019

Я новичок в React, и я пытался добавить модальный код начальной загрузки в мой проект, чтобы посмотреть, работает он или нет. Тем не менее, я всегда получаю некоторые ошибки в этом.

Я скопировал вставил код из https://react -bootstrap.github.io / components / modal / (вертикально по центру) и преобразовалфункция к классу.

App.js 

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Button from 'react-bootstrap/Button'
import 'bootstrap/dist/css/bootstrap.min.css';
import './Mypage.scss'
import Modal from 'react-bootstrap/Button'
import MyVerticallyCenteredModal from './MyVerticallyCenteredModal'


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {modalShow : false};
    this.handleClick = this.handleClick.bind(this);
  }

async handleClick(e) {
    this.setState({modalShow : true});
    const url = 'http://54.233.24.23/test'
    //const data = {username:this.state.userName, password:this.state.password, action:this.state.act};
    try {
      const response = await fetch(url, 
      {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json'
        },
      });
      const json = await response.json();
      console.log(json);
    } catch (error) {
      console.error('Error', error);
    }
 }

 handleHide() {
  this.setState({modalShow: false});
 }

render() {
  const mod = this.state.modal;
  return (
    <div className="backg">
      <div className="buttons">
        <Button size="lg" className="button1" variant="outline-dark">Sellers</Button>
        <Button size="lg" onClick={this.handleClick} className="button2" variant="outline-dark">Buyers</Button>
        <MyVerticallyCenteredModal
        show={this.state.modalShow}
        onHide = {this.handleHide}
        />
      </div>
    </div>
  );
}
}

export default App;

MyVerticallyCenteredModal.js 

import React from 'react';
import Modal from 'react-bootstrap/Button'
import Button from 'react-bootstrap/Button'

class MyVerticallyCenteredModal extends React.Component {
  constructor(props) {
    super(props);
  }

render() { 
  return (
    <Modal
      {...this.props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Modal heading
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <h4>Centered Modal</h4>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
          dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
          consectetur ac, vestibulum at eros.
        </p>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={this.props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
  );
}
}

export default MyVerticallyCenteredModal;

Я получаю следующую ошибку:

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

Проверьте метод рендеринга MyVerticallyCenteredModal.

1 Ответ

1 голос
/ 20 октября 2019 
import Modal from 'react-bootstrap/Button'

Вы импортируете Modal из /Button. Попробуйте это: 

import Modal from 'react-bootstrap/Modal'

Или вы можете использовать эту форму: 

import { Modal } from 'react-bootstrap';
...