javascript - ejemplos - Reactjs: configurar correctamente los estilos en línea

react js ejemplos

Question

Estoy tratando de usar Reactjs con un divisor de kendo. El divisor tiene un atributo de estilo como

style="height: 100%"

Con Reactjs, si he entendido bien las cosas, esto se puede implementar usando un estilo en línea

var style = {
  height: 100
}

Sin embargo, también estoy usando Dustin Getz jsxutil en un intento de dividir las cosas un poco más y tener fragmentos html independientes. Hasta ahora tengo el siguiente fragmento html (splitter.html)

<div id="splitter" className="k-content">
  <div id="vertical">
    <div>
      <p>Outer splitter : top pane (resizable and collapsible)</p>
    </div>
    <div id="middlePane">
      {height}
      <div id="horizontal" style={height}>
        <div>
          <p>Inner splitter :: left pane</p>
        </div>
        <div>
          <p>Inner splitter :: center pane</p>
        </div>
        <div>
          <p>Inner splitter :: right pane</p>
        </div>
      </div>
    </div>
  <div>
  <p>Outer splitter : bottom pane (non-resizable, non-collapsible)</p>
</div>

y un componente splitter.js que hace referencia a este html de la siguiente manera

define([''react'', ''external/react/js/jsxutil'',''text!internal/html/splitter.html''],
  function(React, jsxutil, splitterHtml) {
    ''use strict'';
    console.log(''in app:'' + splitterHtml);
    return React.createClass({

      render: function () {
        var scope = {
          height: 100
        };
        console.log(''about to render:'' + scope.height);

        var dom = jsxutil.exec(splitterHtml, scope);
        console.log(''rendered:'' + dom);
        return dom;
      }    
    });
  }
)

Ahora cuando ejecuto esto, puedo ver la altura correctamente si lo pongo como contenido. Sin embargo, cuando se ejecuta como las propiedades de estilo, recibo un error

The `style` prop expects a mapping from style properties to values, not a string. 

Así que, obviamente, aún no lo he mapeado correctamente.

Estaría muy agradecido si alguien pudiera darme un novillo para corregir esto.

Answer 1

No es inmediatamente obvio de la documentation por qué lo siguiente no funciona:

<span style={font-size: 1.7} class="glyphicon glyphicon-remove-sign"></span>

Pero al hacerlo completamente en línea:

• Necesitas doble llaves
• No necesita poner sus valores entre comillas
• React agregará algunos valores predeterminados si omites "em"
• Recuerda los nombres de estilo de camelCase que tienen guiones en CSS; por ejemplo, font-size se convierte en fontSize:
• class es className

La forma correcta se ve así:

<span style={{fontSize: 1.7 + "em"}} className="glyphicon glyphicon-remove-sign"></span>

Answer 2

También puede intentar configurar el style línea sin usar una variable, como se muestra a continuación:

style={{"height" : "100%"}} o,

para atributos múltiples: style={{"height" : "100%", "width" : "50%"}}

Answer 3

Usted necesita hacer ésto:

var scope = {
     splitterStyle: {
         height: 100
     }
};

Y luego aplique este estilo a los elementos requeridos:

<div id="horizontal" style={splitterStyle}>

En tu código estás haciendo esto (que es incorrecto):

<div id="horizontal" style={height}>

Donde height = 100 .