ReactJS Komponentennamen müssen mit Großbuchstaben beginnen?

Ich spiele mit dem ReactJS-Framework auf JSBin.ReactJS Komponentennamen müssen mit Großbuchstaben beginnen?

Ich habe festgestellt, dass wenn mein Komponentenname mit einem Kleinbuchstaben beginnt, es nicht funktioniert.

Zum Beispiel folgendes machen nicht:

var fml = React.createClass({ 
    render: function() { 
    return <a href='google.com'>Go</a> 
    } 
}); 

React.render(<fml />, document.body);

Aber sobald ich die fml mit Fml ersetzen Sie es nicht machen.

Gibt es einen Grund, ich kann Tags mit kleinen Buchstaben nicht beginnen?

Quelle

2015-05-21 shaunakde

Überprüfen Sie die Antworten auf diese Frage für einige weitere Details: [Html rendert nicht im Browser - Reagieren js] (https://stackoverflow.com/questions/42110144/html-is-not-rendering-in-the -browser-react-js) –

108

In JSX werden kleingeschriebene Tag-Namen als HTML-Tags betrachtet. Kleinere Tag-Namen mit einem Punkt (Eigenschaft Accessor) sind jedoch nicht.

Siehe HTML tags vs React Components.

<component /> kompiliert React.createElement('component') (HTML-Tag)
<Component /> kompiliert React.createElement(Component)
<obj.component /> kompiliert React.createElement(obj.component)

Quelle

2015-05-21 12:16:36

Fügen Sie noch eine halbe Stunde zum Zähler hinzu. Ich wurde wahnsinnig und versuchte etwas wie 'let component = components [compType]; ', und Unsinn Fehler zu bekommen. – Zequez

Ich habe '' ausprobiert, was auch nicht funktioniert. –

Ich kann nicht glauben, dass ich nicht bemerkt habe, dass es eine solche Regel gibt. – shaosh

Morphaus eine sehr gute Antwort gab, nur ein weiteres Detail hinzufügen wollte. React enthält eine Whitelist bekannter Elementnamen wie div usw., mit der zwischen DOM-Elementen und React-Komponenten unterschieden wird.

Aber weil die Pflege dieser Liste nicht so viel Spaß macht und weil Web-Komponenten das Erstellen benutzerdefinierter Elemente ermöglichen, haben sie eine Regel aufgestellt, dass alle React-Komponenten mit einem Großbuchstaben beginnen oder einen Punkt enthalten müssen.

Quelle

2015-05-21 12:41:24

Danke für die Erklärung der Argumentation. – shaunakde

tolle Infos, noch besser, wenn es eine offizielle Dok.-Referenz gibt. Vielen Dank. –

Wann wurde das geändert? –

In JSX werden React-Klassen groß geschrieben, um XML kompatibel zu machen, so dass es nicht mit einem HTML-Tag verwechselt wird. Wenn die reaktiven Klassen nicht groß geschrieben werden, handelt es sich um ein HTML-Tag als vordefinierte JSX-Syntax.

Quelle

2016-04-30 13:10:03

Der erste Teil eines JSX Tags bestimmt den Typ des React Elements, grundsätzlich gibt es eine Konvention Großgeschrieben, Kleinbuchstaben, Punktnotation.

Aktivieren und Punktnotation Typen zeigen, dass der JSX-Tag auf eine Komponente Reagieren bezieht, also, wenn Sie verwenden die JSX <Foo /> zu React.createElement(Foo) kompilieren
OR
<foo.bar />-React.createElement(foo.bar) kompilieren und zu einer Komponente entsprechen definiert oder importiert in Ihrer JavaScript-Datei.

Während der Kleintyp auf eine integrierte Komponente anzuzeigen, wie <div> oder <span> und die Ergebnisse in einem String 'div' oder 'span' zu React.createElement('div') geben.

React empfiehlt, Komponenten mit einem Großbuchstaben zu benennen. Wenn Sie eine Komponente haben, die mit einem Kleinbuchstaben beginnt, weisen Sie sie einer Großbuchstabenvariablen zu, bevor Sie sie in JSX verwenden.

Quelle

2017-07-23 09:10:50

ReactJS Komponentennamen müssen mit Großbuchstaben beginnen?

Antwort

Verwandte Themen