Réagir Bootstrap dans le fichier JSX dans Meteor

Question

J'ai installé React Bootstrap dans mon application météore.

https://atmospherejs.com/universe/react-bootstrap

Sur cette page, il est dit que:

This package additionally export ReactBootstrap as a global, so you can write inside any .jsx file

Il donne ensuite un exemple.

let { Button } = ReactBootstrap; 

<Button /> // React component 
or 

<ReactBootstrap.Button /> // React component 

Cependant, quand je fais:

render(){ 


     return (
       <div> 

        <ReactBootstrap.Button/> 

       </div> 
      ); 
    } 

fonction

dans mon render() pour réagir Meteor je reçois l'erreur suivante:

universe_react-bootstrap.js?hash=85ba81631c5fee5b5e0bceb7d1dc34847f2f2e89:14811 Uncaught TypeError: Cannot read property '__reactAutoBindMap' of undefined at Constructor (universe_react-bootstrap.js?hash=85ba81631c5fee5b5e0bceb7d1dc34847f2f2e89:14811) at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:291) at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:259) at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:178) at Object.mountComponent (ReactReconciler.js:49) at ReactDOMComponent.mountChildren (ReactMultiChild.js:242) at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:704) at ReactDOMComponent.mountComponent (ReactDOMComponent.js:529) at Object.mountComponent (ReactReconciler.js:49) at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:367)

Mais si je fais:

render(){ 
    console.log(ReactBootstrap) 
} 

Je reçois la confirmation que cette globa l variable existe ....

Comment l'utiliser ReactBootstrap dans les balises div ???

C'est tout le code:

import React, { Component } from 'react'; 


// App component - represents the whole app 
export default class App extends Component { 



    render() { 
    return (
     <div> 
     <h1>Testing</h1> 
     <ReactBootstrap.Button /> 
     </div> 
    ); 
    } 
} 

Voici le lien GitHub: https://github.com/blissGitHub/TestingReactBootstrapWithMeteor.git

Answer 1

Le problème semble être dans le paquet universe:react-bootstrap. C'est trop vieux et semble ne plus être maintenu. Il utilise une version obsolète de react-boostrap: 0.24.2, tandis que son actuel est 0.31.3 (publié il ya seulement 3 semaines).

Ainsi, il semble que nous devrions nous en débarrasser:

meteor remove universe:react-bootstrap 
meteor add twbs:bootstrap 
meteor npm i --save react-bootstrap 

Et modifier légèrement votre code:

import React, { Component } from 'react'; 
import ReactBootstrap from 'react-bootstrap'; 

// App component - represents the whole app 
export default class App extends Component { 
    render() { 
    return (
     <div> 
     <h1>Testing</h1> 
     <ReactBootstrap.Button bsStyle="success">Click Me</ReactBootstrap.Button> 
     </div> 
    ); 
    } 
} 

Résultat:

de Bien sûr, vous pouvez l'utiliser lik e ceci:

import ReactBootstrap from 'react-bootstrap'; 
const { Button } = ReactBootstrap; 
... 
<Button bsStyle="...">...</Button> 

ou comme ceci:

import { Button } from 'react-bootstrap'; 
... 
<Button bsStyle="...">...</Button> 

Answer 2

Après avoir lu le docs pour le paquet, je crois que vous pouvez faire quelque chose comme ceci:

import React, { Component } from 'react'; 
import { Button } from 'bootstrap'; 


// App component - represents the whole app 
export default class App extends Component { 



    render() { 
    return (
     <div> 
     <h1>Testing</h1> 
     <Button /> 
     </div> 
    ); 
    } 
}