web-dev-qa-db-fra.com

React Erreur de balise de style JSX lors du rendu

Voici ma fonction de rendu de réaction render: function () {

  return (
          <div>
                <p className="rr">something</p>


                  <style>
                    .rr{
                      color:red;
                    }
                  </style>
          </div>    
        )
}

Cela me donne cette erreur "JSX: Erreur: Erreur d'analyse: Ligne 22: Jeton inattendu:"

Qu'est-ce qui ne va pas ici? Puis-je intégrer un CSS normal complet dans un composant React?

cssreactjsreact-jsx
35
user48545

JSX n'est qu'une petite extension de javascript, ce n'est pas son propre langage de template complet. Donc, vous le feriez comme en javascript:

        return (<div>
            <p className="rr">something</p>


              <style>{"\
                .rr{\
                  color:red;\
                }\
              "}</style>
      </div>)

http://jsfiddle.net/r6rqz068/

Cependant, il n'y a absolument aucune bonne raison de le faire.

33
Esailija

Facile à faire avec les chaînes de modèle es6 (qui permettent les sauts de ligne). Dans votre méthode de rendu:

const css = `
    .my-element {
        background-color: #f00;
    }
`

return (
    <div class="my-element">
        <style>{css}</style>
        some content
    </div>
)

En ce qui concerne le cas d'utilisation, je fais cela pour une div avec certaines cases à cocher que j'utilise pour le débogage, que je voudrais contenir dans un fichier pour une suppression facile plus tard.

50
Sebastian

Les styles en ligne sont mieux appliqués directement au modèle JSX du composant:

return (
  <div>
    <p style={{color: "red"}}>something</p>
  </div>
);

DÉMO: http://jsfiddle.net/chantastic/69z2wepo/329/

Remarque: JSX ne prend pas en charge la syntaxe HTML pour l'attribut style

Déclarez les propriétés en utilisant les noms de propriété camelCase, par exemple,

{ color: "red", backgroundColor: "white" }

Pour en savoir plus ici: http://facebook.github.io/react/tips/inline-styles.html

23
chantastic

"classe" est un mot réservé en JavaScript. Utilisez plutôt "className".

De plus, vous devez vous rappeler que vous utilisez JSX, pas HTML. Je ne crois pas que jsx analysera vos balises. Une meilleure approche consiste à créer un objet avec vos styles, puis à l'appliquer comme style (voir ci-dessous).

var styles = {
  color:"red";
}

return (
  <div>
    <p style={styles}>something</p>
  </div>    
)
9
Tyler McGinnis
  1. Créez une fonction pour gérer l'insertion de la balise de style.
  2. Ajoutez le CSS souhaité à une variable de chaîne.

  3. Ajoutez la variable au JSX retourné à l'intérieur de votre <style> tag.

    renderPaypalButtonStyle() {
    let styleCode = "#braintree-Paypal-button { margin: 0 auto; }"
    return (
        <style>{ styleCode }</style>
    )
}
5
Michael J. Calkins

Cela peut être fait en utilisant le backtick "` "comme ci-dessous

return (<div>
        <p className="rr">something</p>


          <style>{`
            .rr{
              color:red;
            }
          `}</style>
  </div>)
4
Kamran Syed

C'est ce que j'ai fait:

  render(){
    var styleTagStringContent = 
    ".rr {"+
       "color:red"+
    "}";
    return (
      <style type="text/css">
        {styleTagStringContent}
      </style>
    );
1
Con Antonakos