1
votes

Utilisation de la bibliothèque Bootstrap et jQuery dans React + Redux Project

L'utilisation de la bibliothèque jQuery et de la bibliothèque Bootstrap pose un problème dans React + Redux Project.

J'ai ajouté la bibliothèque dans mon index.html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <title>Sample</title>
  </head>
  <body>
    <div id="root"></div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
</script>
  </body>
</html>

Besoin de Bootstrap pour bootstrapmodel , bootstrapmenu etc. et de nombreux autres composants disponibles dans bootstrap.

J'ai essayé react-bootstrap mais la fonctionnalité n'est pas remplie par cela.

reactjs bootstrap-4 react-redux redux bootstrap-modal

1 commentaires

Qu'est-ce qui ne fonctionne pas? Vous pouvez utiliser bootstrap / jquery avec react et redux. react-bootstrap est pour bootstrap 3, ne l'utilisez pas avec bootstrap 4

3 Réponses :

0
votes

Non! Ceci est tout à fait acceptable dans les applications React.

0 commentaires

0
votes

Bien qu'il ne soit pas recommandé d'utiliser jquery dans le projet react, vous pouvez toujours l'utiliser si vous voulez l'utiliser. Installez le package jquery npm

npm i jquery

Vous pouvez trouver plus d'informations ici: jquery-npm

0 commentaires

2
votes

Besoin de Bootstrap pour bootstrapmodel, bootstrapmenu etc et de nombreux autres composants disponibles dans bootstrap

Vous devez manipuler la classe pour afficher le modal et le menu.

Mieux vaut utiliser reactstrap a > C'est un wrapper de réaction autour des composants bootstrap.

Vérifiez le modal code ici

/* eslint react/no-multi-comp: 0, react/prop-types: 0 */

import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class ModalExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }

  render() {
    return (
      <div>
        <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default ModalExample;

0 commentaires