Bootstrap s'effondrer avec réagir js

Salut, je suis en train d'utiliser bootstrap effondrement à l'intérieur d'une réagir la vue et il ne fonctionne pas. C'est très simple mais je ne comprends pas ce qui se passe.

return (<div>
    <button className="btn" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="true" aria-controls="collapseExample">
        ButtonClickthis!
    </button>
    <div className="collapse" id="collapseExample">
        <div className="well">
            ...blablablacontent
        </div>
    </div>
</div>);

source d'informationauteur François Richard

  1. 7

    Bootstrap ne fonctionnera pas hors de la boîte pour réagir composants, car il analyse les DOM sur la charge et l'attache des écouteurs d'événement, etc. Vous pouvez essayer quelque chose comme réagir-bootstrap ou manuelle de déclenchement à l'intérieur de la componentDidMount cycle de vie.

    – David

  2. 0

    J'ai vécu cela avant. Tout ce que vous devez faire est de déclencher manuellement des événements à l'intérieur componentDidMount. Vous pouvez également re-déclenchement des événements dans le rappel de la setState.

  3. 0

    Un point à mentionner: Si vous utilisez ce dans un MNP/ES6 contexte --

    Vous souhaitez importer jquery première et la fenêtre.jQuery variable ainsi donc, avant de vous charger de bootstrap:

     import $ from 'jquery';
 window.jQuery = $;
 import bootstrap from 'bootstrap';

    Au moins j'ai eu à le faire pour bénéficier d'amorçage de la charge.

    En général, je crois qu'il est préférable d'aller avec les composants qui ont été convertis à l'Réagissent monde déjà dans la réaction projet "bootstrap". Mais dans ce cas (Effondrement), il n'a pas été converti encore.

  4. 0

    Si vous ne voulez pas déconner avec jQuery:

    Tout d'abord, construire un objet référence pour chacun de vos pliable éléments; aussi construire une fonction pour basculer le .show classe CSS à l'élément correspondant.

    Ensuite, utilisez activation /désactivation de la fonction à un bouton onClick.

    class Collapse extends React.Component {
  constructor(props) {
    super(props)

    this.refs = {}

    //build ref object with collapsible elements ids
    this.setRef = (element) => {
      this.refs[element.id] = element
    }

    //toggle "show" CSS class using plain JS
    this.collapseRef = (id) => {
      if (this.refs) this.refs[id].classList.toggle('show')
    }        
  }

  render() {
    return (
      <div>
        <button
          type="button"
          onClick={() => this.collapseRef('content1')}
        >
          Collapse!
        </button>
        <div
          className="collapse"
          //Use the `ref` callback to store a reference to the collapsible DOM element
          ref={this.setRef}
          id="content1"
        >
          Collapsible content
        </div>
      </div>
    )
  }
}