web-dev-qa-db-fra.com

Reactjs - définition correcte des styles en ligne

J'essaie d'utiliser Reactjs avec un séparateur de kendo. Le séparateur a un attribut de style comme

style="height: 100%"

Avec Reactjs, si j’ai bien compris les choses, cela peut être implémenté en utilisant un style inline

var style = {
  height: 100
}

Cependant, j'utilise aussi Dustin Getz jsxutil pour tenter de scinder un peu plus les choses et d’avoir des fragments HTML indépendants. Jusqu'ici, j'ai le fragment html suivant (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>

et un composant splitter.js qui référence ce code HTML comme suit

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

Maintenant, quand je lance ceci, je peux voir la hauteur correctement si je le mets en tant que contenu. Cependant, quand il s'exécute en tant que propriétés de style, j'obtiens une erreur.

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

Donc, évidemment, je ne l'ai pas encore bien cartographié.

Je serais vraiment reconnaissant si quelqu'un pouvait me guider pour corriger cela.

javascripthtmlreactjs
52
Simon Woods

Vous devez faire ceci:

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

Et appliquez ensuite ce style aux éléments requis:

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

Dans votre code, vous procédez comme suit (ce qui est incorrect):

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

Où height = 100.

32
Gohn67

Vous pouvez également essayer de définir style inline sans utiliser de variable, comme ceci:

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

pour plusieurs attributs: style={{"height" : "100%", "width" : "50%"}}

126
myusuf

Ce n'est pas immédiatement évident d'après documentation pourquoi ce qui suit ne fonctionne pas:

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

Mais en le faisant entièrement en ligne:

  • Vous avez besoin de doubles accolades
  • Vous n'avez pas besoin de mettre vos valeurs entre guillemets
  • React ajoutera des valeurs par défaut si vous omettez "em"
  • Rappelez-vous de noms de style camelCase qui ont des tirets en CSS - par exemple. la taille de la police devient fontSize:
  • class est className

La manière correcte ressemble à ceci:

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

Manière correcte et plus claire est:

<div style={{"font-size" : "10px", "height" : "100px", "width" : "100%"}}> My inline Style </div>

C'est plus simple en suivant l'approche:

// JS
const styleObject = {
      "font-size" : "10px",
      "height" : "100px",
      "width" : "100%"
}

// HTML    
<div style={styleObject}> My inline Style </div>

Inline style attribut attend objet. D'où son écrit en {}, et cela devient double {{}} _ comme on le fait pour les normes par défaut.

0
Sangwin Gawande