web-dev-qa-db-fra.com

Bootstrap collapse avec react js

Salut, j'essaie d'utiliser bootstrap collapse dans une vue de réaction et cela 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>);
twitter-bootstrapreactjs
13
François Richard

Bootstrap ne fonctionnera pas immédiatement pour les composants reay, car il analyse le DOM lorsqu’il est chargé et attache des écouteurs d’événements, etc. Vous pouvez essayer quelque chose comme react-bootstrap ou déclencher manuellement au sein du cycle de vie composantDidMount.

- David

9
FakeRainBrigand

Un point qui mérite d’être mentionné: si vous l’utilisez dans un contexte NPM/ES6 -

Vous voulez d'abord importer jquery et définir ainsi la variable window.jQuery avant de charger bootstrap:

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

Au moins, je devais le faire pour que bootstrap soit chargé.

En général, je pense qu’il est préférable d’utiliser les composants qui ont déjà été convertis au monde React dans le projet react-bootstrap. Mais dans ce cas (Collapse), il n'a pas encore été converti.

0
jomofrodo

Si vous ne voulez pas perdre votre temps avec jQuery:

Commencez par créer un objet de référence pour chacun de vos éléments réductibles. créez également une fonction permettant de basculer la classe CSS .show vers l'élément correspondant.

Ensuite, utilisez la fonction toggler dans 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>
    )
  }
}
0
Mateus Dal Bianco

J'ai vécu cela auparavant. Tout ce que vous avez à faire est de déclencher manuellement des événements à l'intérieur de composantDidMount. Vous pouvez également vouloir réactiver les événements dans le rappel de setState. 

0
Duong Nhu