Le classi Bootstrap non funzionano nel componente ReactJS

Ho appena iniziato a imparare a utilizzare ReactJS per il rendering delle viste, ma ho trovato che le classi CSS bootstrap non funzionano come previsto se inserisco gli attributi direttamente nei componenti ReactJS. Ad esempio, nel codice seguente, desidero generare un pannello con le classi: panel-default e panel-heading; tuttavia, la vista generata non ha lo stile di bootstrap. Mi chiedevo perché e come risolvere, se possibile. Si noti che ho compilato il mio codice ReactJS e incluso il codice JS compilato nel codice HTML (vedere in fondo).Le classi Bootstrap non funzionano nel componente ReactJS

var taxonGroups = { 
    identifier: 'ABC-x981', 
    sources: [ 
    {segmentName: 'segment1', length: 1090}, 
    {segmentName: 'segment2', length: 98}, 
    {segmentName: 'segment3', length: 2091}, 
    {segmentName: 'segment4', length: 1076}, 
    ], 

    fields: ['Taxon Name', 'Taxon ID', 'Taxon source'], 

    collectionDate: '2001-09-10' 
}; 

var Taxon = React.createClass({ 
    render: function() { 
    return (
     <div class="panel panel-default"> <div class="panel-heading"><p>{this.props.data.identifier}</p></div> 
     <table class="table table-bordered table-striped table-hover"> 
       { 
       this.props.data.sources.map(function(source) { 
        return <Segment name={source.segmentName} length={source.length}/> 
       }) 
       } 
      </table> 

     </div> 
    ); 
    } 
}); 


var Segment = React.createClass({ 
    render: function() { 
    return <tr><td>{this.props.name}</td><td>{this.props.length}</td></tr> 
    } 

    }); 

React.render(<Taxon data={taxonGroups} />, document.getElementById('container'));

Il codice HTML:

<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> 
    <script src="bower_components/jquery/dist/jquery.min.js"></script> 
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
    <script src="bower_components/react/react.js"></script> 
    <script src="bower_components/react/JSXTransformer.js"></script> 
    <title>reactJS 3 - Rendering data with bootstrap styles</title> 
</head> 
<body> 
<span>Is there anything?</span> 

<div id="container"> 

</div> 

<div class="panel panel-default"> 
    <div class="panel-heading">This is Panel Heading!</div> 
    <div class="panel-body"> 
    This is panel body 
    </div> 
</div> 


<script src="scripts/ReactJS/build/taxon.js"></script> 
</body> 
</html>

fonte

2015-01-10 TonyGW

Nel Reagire, l'attributo è className, non class. Così, per esempio, piuttosto che avere

<div class="panel panel-default">

Si dovrebbe invece avere

<div className="panel panel-default">

Impostando come class, Reagire ignora quell'attributo, e di conseguenza l'HTML generato non include le classi le Bisogni CSS.

Se si esegue l'HTML previsto attraverso lo compiler, questo è effettivamente quello che si ottiene. enter image description here

fonte

2015-01-10 02:18:58 FeifanZ

Grazie per averlo risolto. – CoryCowgill

Grazie per la tua spiegazione. Solo un'altra magia :( – haotang

Grazie! Ottima spiegazione. –

Le classi Bootstrap non funzionano nel componente ReactJS

risposta

Problemi correlati