Was ist diese seltsame JavaScript-Syntax, die HTML-Tags mit JavaScript zu mischen scheint?

Question

Ich habe einen interessanten Frieden von JavaScript-Code gesehen, aber verstehe nicht, was es bedeutet und warum es mir einen Fehler zurückgibt, wenn ich versuche, es in der Konsole zu testen. Hier

ist ein Beispiel für den Code ein:

const Component = ({name}) => (<div>Hello {name}</div>) 

Ist es etwas Acording zum ES6 oder was?

PS: Ich glaube, ich es in einer Render-Funktion auf diese Weise verwenden kann:

<Component name={'John'} /> 

Recht?

Answer 1

Wie Vladu Ionut wies darauf hin -> es wie eine jsx Rückkehr sieht (Hallo {Name}) So wahrscheinlich sein aus einer Anwendung reagieren ...

sowieso auf Ihre Frage: const ist ES6 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/const

(foo) => { "bar"} ist ein Pfeil Funktion mit dem Parameter foo, die "bar" https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

({Name}) => ... gibt destructuri ng assignment -> ein Objekt wird als param übergeben, es bekommt nur einen Namen vom Objekt und übergibt es an die Funktion anstelle des vollständigen Objekts.

als Vladu Ionut wieder richtig gezeigt kann dies nicht direkt in Ihrem Browser verwendet werden, weil Ihr Browser wird wahrscheinlich nicht unterstützen, das ist, warum Sie es vorher mit z. Babel https://babeljs.io

Answer 2

Sie können die JSX-Syntax nicht in der Browserkonsole testen.

Die JSX bietet nur syntaktischen Zucker für die React.createElement(component, props, ...children) Funktion, so dass der Compiler (ich denke für Ihren Fall ist Babel) wird die Jsx in einen JS-Code (Schauen Sie hier ->https://babeljs.io/docs/plugins/transform-react-jsx/).