Réagir JSX Style de la Balise d'Erreur sur le Rendu
voici ma fonction de rendu react rendu:function(){
return (
<div>
<p className="rr">something</p>
<style>
.rr{
color:red;
}
</style>
</div>
)
}
Cela me donne cette erreur "JSX: Error: Parse Error: Line 22: Unexpected token :"
Qu'est-ce qui ne va pas ici? Est-ce que je peux intégrer le css normal complet dans un composant react?
7 réponses
JSX n'est qu'une petite extension de javascript, ce n'est pas son propre langage de template. Donc vous le feriez comme dans javascript:
return (<div>
<p className="rr">something</p>
<style>{"\
.rr{\
color:red;\
}\
"}</style>
</div>)
il n'y a Toutefois pas de bonne raison de le faire.
Facile à faire avec es6 chaînes du modèle (ce qui permet des 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 le fais pour un div avec quelques cases à cocher que j'utilise pour déboguer, que je voudrais contenir dans un fichier pour une suppression facile plus tard.
return (
<div>
<p style={{color: "red"}}>something</p>
</div>
);
DÉMO: http://jsfiddle.net/chantastic/69z2wepo/329/
Note: JSX ne supporte pas la syntaxe HTML pour l'attribut style
déclarer les propriétés en utilisant les noms de propriétés camelCase, par exemple,
{ color: "red", backgroundColor: "white" }
"classe" est un mot réservé en JavaScript. Utilisez plutôt "className".
en outre, vous devez vous rappeler que vous utilisez JSX, pas HTML. Je ne crois pas que jsx analysera vos étiquettes. Une meilleure approche est de créer un objet avec vos styles, puis appliquez le style (voir ci-dessous).
var styles = {
color:"red";
}
return (
<div>
<p style={styles}>something</p>
</div>
)
- Créer une fonction pour gérer l'insertion de la balise style.
- ajouter le CSS que vous voulez à une variable string.
ajouter la variable au JSX retourné à l'intérieur de votre
<style>balise.renderPaypalButtonStyle() { let styleCode = "#braintree-paypal-button { margin: 0 auto; }" return ( <style>{ styleCode }</style> ) }
Cela peut être fait en utilisant backtick """ comme ci-dessous
return (<div>
<p className="rr">something</p>
<style>{`
.rr{
color:red;
}
`}</style>
</div>)
c'est Ce que j'ai fait:
render(){
var styleTagStringContent =
".rr {"+
"color:red"+
"}";
return (
<style type="text/css">
{styleTagStringContent}
</style>
);