Générer inline police-taille de style à l'aide de ReactJS

Je suis en train de faire quelque chose comme cela dans ReactJS:

var MyReactClass = React.createClass({
    render: function() {
        var myDivText = "Hello!";
        var myFontSize = 6; //this is actually something more complicated, I'm calculating it on the fly
        var divStyle = {
            font-size: {fontSize + 'px !important;'},
        };
        return (<div style={divStyle}>{myDivText}</div>);
   }
});

Le problème est que j'obtiens cette erreur quand je lance mon code:
Le Module "build failed: Error: Parse Error: Ligne 5: Unexpected token"
apparemment, Réagir n'aime pas que font-size a un tiret. Comment puis-je contourner ce problème? Est-il un moyen d'échapper à ce caractère pour réagir? Est-il différent d'une propriété css qui réagissent aime mieux qui fait la même chose?

Merci!

C'est en fait un script JavaScript qui génère l'erreur première. Une non cotées nom de la propriété doit être un nom de l'identificateur valide ou littéral numérique. Code valide serait: {'font-size': '10px'} (avec les guillemets). Bien que je ne suis pas sûr de savoir comment Réagir le manipuler.
Il est vrai que JavaScript a ces restrictions sur les participations non cotées les noms de propriété, mais c'est en fait une clé dans une Réagir style d'objet, pas un javascript de la propriété, si je comprends bien
camelCase œuvres en ligne et les non-camel stylings de travail dans les feuilles de style. Les feuilles de style sont un commun de meilleures pratiques pour que les autres ne pas avoir à vous soucier de manquer quelque chose d'un épais bloc de code. Heureux vous avez compris!

OriginalL'auteur kat | 2014-11-05

39

Utilisation fontSize au lieu de font-size

la solution est de camelCase propriétés qui contiennent généralement un tiret

http://facebook.github.io/react/tips/inline-styles.html

Répondu à ma propre question 🙂

Et si vous avez quelque chose comme: -webkit-box-shadow, puis il suffit de mettre webkitBoxShadow
Vous avez besoin de réellement commencer avec un capital W de sorte qu'il serait "WebkitBoxShadow". Réagir états vendeur préfixes autres que ms démarrer avec un capital. facebook.github.io/react/tips/inline-styles.html
merci, bonne prise

OriginalL'auteur kat
0

- Je utiliser fontSize: pixels nombre

OriginalL'auteur Guille_2783
0

Comme https://reactjs.org/docs/dom-elements.html dit,

Nous avons besoin de supprimer '-' et majuscules à l'exception premier mot

Exemple-

background-color as backgroundColor,

Même sera applicable partout, sauf quelques-uns que l'-
```
aria-* and data-*
```
exemple-
```
aria-label as aria-label 
```
Ci-dessus a fonctionné pour moi!

OriginalL'auteur S.Yadav

Vous devez vous connecter pour publier un commentaire.