Tagfout: Reageer JSX-stijltagfout bij weergave

Dit is mijn reactie-weergavefunctie

render:function(){
  return (
    <div>
      <p className="rr">something</p>
      <style>
        .rr{
          color:red;
        }
      </style>
    </div>    
  )
}

Dit geeft me deze fout

“JSX: Error: Parse Error: Line 22: Unexpected token :”

Wat is hier mis?
Kan ik volledige normale css insluiten in een react-component?

Antwoord 1, autoriteit 100%

Eenvoudig te doen met es6-sjabloonstrings (waardoor regeleinden mogelijk zijn). In uw rendermethode:

const css = `
    .my-element {
        background-color: #f00;
    }
`
return (
    <div class="my-element">
        <style>{css}</style>
        some content
    </div>
)

Wat betreft use case, ik doe dit voor een div met een aantal selectievakjes die ik gebruik voor het opsporen van fouten, die ik graag in één bestand zou willen opnemen om het later gemakkelijk te kunnen verwijderen.

Antwoord 2, autoriteit 60%

JSX is slechts een kleine uitbreiding van javascript, het is niet zijn eigen volwaardige sjabloontaal. Dus je zou het doen zoals in javascript:

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

http://jsfiddle.net/r6rqz068/

Er is echter absoluut geen goede reden om dit te doen.

Antwoord 3, autoriteit 28%

Inline-stijlen kunnen het beste rechtstreeks op de JSX-componentsjabloon worden toegepast:

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

DEMO: http://jsfiddle.net/chantastic/69z2wepo/329/

Opmerking: JSX ondersteunt geen HTML-syntaxis voor het stijlkenmerk

Eigenschappen declareren bij het gebruik van camelCase-eigenschapsnamen, bijv.

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

Hier lees je meer: ​​http://facebook.github.io/react/ tips/inline-styles.html

Antwoord 4, autoriteit 12%

Dit kan worden gedaan door backtick “`” te gebruiken, zoals hieronder

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

Antwoord 5, autoriteit 9%

“class” is een gereserveerd woord in JavaScript. Gebruik in plaats daarvan “className”.

Bovendien moet je onthouden dat je JSX gebruikt, geen HTML. Ik geloof niet dat jsx je tags zal ontleden. Een betere benadering is om een ​​object met uw stijlen te maken en dat vervolgens als stijl toe te passen (zie hieronder).

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

Antwoord 6, autoriteit 7%

1. Maak een functie om het invoegen van de stijltag af te handelen.
2. Voeg de gewenste CSS toe aan een tekenreeksvariabele.

3. Voeg de variabele toe aan de geretourneerde JSX in uw <style>-tag.

   renderPaypalButtonStyle() {
       let styleCode = "#braintree-paypal-button { margin: 0 auto; }"
       return (
           <style>{ styleCode }</style>
       )
   }
   

Antwoord 7, autoriteit 3%

Dit is wat ik deed:

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

Antwoord 8

import styled from 'styled-components;
return (
 <div>
  <Test>something</Test>
 </div>
)

Volgende stap:

const Test = styled.p`
  color: red
`;