Warum reagiert nicht lassen Sie mich einfach plain html in jsx verwenden?

Question

Ich habe gerade ein Projekt in React gestartet. Irgendwo habe ich ein Video gelesen oder gesehen, dass die Macher stolz darauf waren, dass Sie im Gegensatz zu Angular keine neuen Tags lernen müssen und Sie einfach nur altes HTML verwenden.

war ich ziemlich überrascht, dass mich <img style="..." />-<img styles="" />. (It's Stil vs styles`.)

Meine Frage Ich habe etwas falsch oder ist es das richtige Verhalten von JSX Vorlagen ist haben ändern reagieren machen? Wie kann ich einfach altes HTML in JSX verwenden?

Der Fehler war ich erhielt

invariant.js: 38Uncaught unveränderliche Verletzung: Die style prop eine Zuordnung von Stileigenschaften auf Werte erwartet, keinen String. Beispiel: style = {{marginRight: spacing + 'em'}} bei Verwendung von JSX.

Answer 1

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

für Inline-Stil, ist style der richtige Weg

Answer 2

Erstens, wenn Sie Sie Inline-Stil halten möchten, sollten Sie style={<your-css-rules>} haben, statt styles="<your-css-rules>".

So verlockend es auch sein mag, das Inline-Styling in React zu verwenden, ich würde die Lektion über die Trennung von Bedenken beibehalten und CSS-Klassen verwenden.

Also, in Ihrem Beispiel, könnten Sie so etwas wie

// CSS 

imgClass { 
    background-color: #d0e4fe; 
} 

// HTML 
<img className="imgClass" /> 

This answer tun gibt einen guten Überblick über, wenn in-line Styling zu vermeiden, mit in React.