Kann block nicht innerhalb von return() verwenden. Reagieren JSX

Question

Ich lerne React JS und ein Problem mit JSX. Ich habe eine Komponente:

class Content extends React.Component { 
    render() { 
    const array = ["apple", "orange"] 
    return (
     {array[0]} 
    ) 
    } 
} 

Es Fehler babel.min.js:7 Uncaught SyntaxError: Inline Babel script: Unexpected token, expected ,

wirft Aber wenn ich {array[0]} innerhalb <span> Tag enthalten, das funktioniert.

Ich denke, mein Kern JavaScript ist nicht gut, bitte helfen Sie mir, dieses Problem zu verstehen. Vielen Dank.

Answer 1

Das Rendering der reagierenden Komponente muss einen gültigen HTML-Code zurückgeben, der in ein einzelnes HTML-Container-Tag (z. B. DIV) verpackt ist. Ich denke, du solltest überprüfen, wie die Reaktion funktioniert.

render() { 
    return <div> 
    </div> 
} 

Answer 2

ich denn glauben machen Methode kann nur render a single root, alles, was Sie tun müssen, ist es inisde gültige HTML-Tag zu wickeln, wie so wird sein:

render() { 
    return (<div> {/* any valid js element */}</div>); 
} 

Answer 3

Das Problem, weil in der ersten ist Beispiel: Sie geben kein gültiges Element zurück.

Wenn eine Komponente in der Rendermethode etwas zurückgibt, wird ein von React.createElement erstelltes HTML-Element zurückgegeben.

Here können Sie sehen, was Babel tut.

Versuchen Sie, mit der Syntax Ihres ersten Beispiels zu ändern, um zu sehen, was passiert, dann denke ich, es wird die Dinge für Sie klarer machen.

Answer 4

Keine der aktuellen Antworten gelten in React 16. Das Zurückgeben einer Zeichenfolge oder sogar eines Arrays von Zeichenfolgen in einer render()-Methode ist völlig in Ordnung. Es muss keine Reaktionskomponente sein.

Ihr Problem ist ein Missverständnis, wie der JSX-Transpiler funktioniert. Alles, was Sie wirklich wissen müssen, ist, dass der JSX-Transpiler nichts tut, bis er auf etwas stößt, das er eindeutig als JSX identifizieren kann (etwa <xml />). Ihr erstes Beispiel hat keine JSX.

JSX ist ein rekursiver Algorithmus, der zwischen JSX Modus und JavaScript Modus hin und her schaltet. Ein <xml /> Tag weist den Transpiler an, in den Modus JSX zu wechseln. Im Modus JSX wird die JSX-geschweifte Klammer-Syntax ({echo stuff}) verwendet, um zurück in den JavaScript-Modus zu wechseln.

Sie versuchen, die geschweifte Klammer-Syntax zu verwenden, um zurück in JavaScript Modus zu wechseln, ohne in JSX Modus zu sein. Da Ihr erstes Beispiel kein JSX enthält, wird es vom JSX-Transpiler an den Rest des Babel-Prozesses übergeben. Die Syntax

{array[0]} 

ist kein gültiges JavaScript. Babel wird denken, dass du versuchst, ein Objekt zu deklarieren.Dafür erwartet Babel entweder die Ebene Objektliteral Syntax:

{ apple: array[0] } 

oder es6 Eigenschaftswert Stenografie:

{ apple } // assuming `apple` is a variable in scope 

Wenn Sie wollen das 0 te Element des Arrays zu machen, nur Verwenden Sie

return array[0]