Acabo de empezar a aprender a usar ReactJS para representar puntos de vista, pero me pareció que el bootstrap CSS clases no funcionan como se esperaba si puedo insertar los atributos directamente en el ReactJS componentes. Por ejemplo, en el código de abajo, quiero generar un panel con las clases: panel predeterminado y en el panel de encabezado; sin embargo, la vista generada por no llevar el proceso de arranque de estilo. Me preguntaba por qué y cómo solucionarlo, si es posible. Por favor, tenga en cuenta que he recopilado de mi ReactJS código y se incluye en el compilado JS en el código HTML (ver en la parte inferior).

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'));

El código 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>
InformationsquelleAutor TonyGW | 2015-01-10

2 Comentarios

  1. 67

    En Reaccionar, el atributo es className, no class. Así, por ejemplo, en lugar de tener

    <div class="panel panel-default">

    Debe tener

    <div className="panel panel-default">

    Estableciendo como class, Reaccionar ignora que el atributo, y como resultado el código HTML generado no incluye las clases CSS necesidades.

    Si ejecuta la espera de HTML a través de la compilador, que es de hecho lo que se obtiene.Bootstrap clases no funcionan en ReactJS componente

    • Gracias a esta arreglado para mí.
    • Gracias por tu explicación. Sólo otra magia 🙁
    • Gracias! Gran explicación.
  2. 0

    Tuve un problema similar, cuando después de una Reaccionan tutorial, me fue escrito

    <div classname="my bootstrap code here"> 

    lugar de

    <div className="my bootstrap code here">

    nombre de la clase debe estar en camello caso de jsx. Espero que esta ayuda :).

Dejar respuesta

Please enter your comment!
Please enter your name here