Verwendung von geschweiften Klammern in React

Question

Ich versuche React zu lernen. Ich habe Probleme mit der Verwendung von geschweiften Klammern. Verwendung von geschweiften Klammer unterscheidet zwischen JSX und JS In dem folgenden Code, Curly Brace 1 sagt "Jetzt ist es JS". Warum gibt es geschweifte Klammer 2? Es ist bereits in einer geschweiften Klammerzone?

var React = require('react'); 
var ReactDOM = require('react-dom'); 

var MyCompClass = React.createClass({ // open curly brace 1 
    render: function() { // open curly brace 2 
    return <h1>Hello</h1>; 
    } 
}); 

ReactDOM.render(
    <MyCompClass />, 
    document.getElementById('app') 
); 

Eine zweite kurze Frage:

ReactDOM.render(
     <MyCompClass />, 
     document.getElementById('app') 
    ); 

warum .render() benötigen HTML-Markierungen um MyComponentClass?

Vielen Dank für Ihre Hilfe!

Answer 1

Sie rufen die React.createClass-Methode mit Objektparameter auf. Die ersten geschweiften Klammern sind die Syntax des Standards javascript object. In diesem Objekt gibt es eine Eigenschaft namens 'render'. Dieses Renderattribut könnte eine Funktion sein, also sind die zweiten geschweiften Klammern der Bereich der JavaScript-Funktionssyntax.

Auch die HTML-Marken in Ihrer Rendermethode ist Ihre React-Komponente und dies ist JSX-Syntax.

folgende Dokumentationen kann also hilfreich sein:

1. React Without ES6
2. Introducing JSX
3. React Without JSX

Edit: Auch ich erkannte, dass für Sie Reagieren Requisiten Nutzung verursachen Verwirrung. In Reaktion, die Syntax von Requisiten wieder mit geschweiften Klammern verwendet, aber dies wird verwendet, um dynamische Bindung für Ihre Komponenten bereitzustellen. Mit dieser Syntax kann Ihre Komponente Ihr HTML aktualisieren, wenn der Wert Ihrer Requisite geändert wird. Im Folgenden ist das Beispiel für diesen Fall:

function Welcome(props) { 
    return <h1>Hello, {props.name}</h1>; 
} 

const element = <Welcome name="Sara" />; 
ReactDOM.render(
    element, 
    document.getElementById('root') 
); 

Weitere Informationen, überprüfen Sie bitte das zugehörige Dokument für Component and Props usage React.

Answer 2

Curly Klammer 2 enthalten den Körper der render() Funktion.

Curly Klammer 1 ... enthält tatsächlich auch Körper der Funktion, wo die Funktion ist React.createClass(). Diese Funktion verwendet als Argument ein Objekt, das mit geschweiften Klammern 1 erstellt wurde und Funktionen und Variablen enthält (in diesem Fall enthält dieses Objekt nur die Methode render()). Die Wahrheit ist, dass in diesem Beispiel die einzigen JSX-Elemente <h1>Hello</h1>; und <MyCompClass /> sind. Sie verwenden JSX-Syntax, während bei reinem JS die DOM-Funktionen createElement() und appendChild() benötigt werden.