反应引导模式

Question

我是 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;

我得到的错误是：

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

检查MyVerticallyCenteredModal的渲染方法。

Answer 1

import Modal from 'react-bootstrap/Button'

您正在从/Button 导入Modal。试试这个：

import Modal from 'react-bootstrap/Modal'

或者你可以使用这种形式：

import { Modal } from 'react-bootstrap';