Verstehen es6 und jsx in reagieren

Ich gehe durch die offizielle Redux-Tutorial. http://redux.js.org/docs/basics/UsageWithReact.htmlVerstehen es6 und jsx in reagieren

In der Datei

components/Link.js haben den folgenden Code

import React, { PropTypes } from 'react' 

const Link = ({ active, children, onClick }) => { 
    if (active) { 
    return <span>{children}</span> 
    } 

    return (
    <a href="#" 
     onClick={e => { 
     e.preventDefault() 
     onClick() 
     }} 
    > 
     {children} 
    </a> 
) 
} 

Link.propTypes = { 
    active: PropTypes.bool.isRequired, 
    children: PropTypes.node.isRequired, 
    onClick: PropTypes.func.isRequired 
} 

export default Link

Was ich frage mich, warum die geschweiften Klammern Variable akzeptieren Funktion Link. Zweitens hat die return-Anweisung im if-Block das jsx-Tag span ohne die geschweiften Klammern, aber die zweite return-Anweisung außerhalb des if-Blocks mit dem <a>-Tag hat eine geschweifte Klammer. Kann jemand erklären warum?

EDIT: Nachdem ich über Destrukturierung Aufgabe aus den Antworten herausgelesen habe, las ich den folgenden Artikel darüber, wie man es in einer Funktion verwendet, und es wurde mir sehr klar. https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6/

Quelle

2016-08-26 Muhammad Raihan Muhaimin

Das ist ein stateless function, können Sie Klassen als Nur-JS-Funktionen definieren reagieren, wenn sie Zustand und Lebenszyklus keine Methoden haben

Die geschweiften Klammern sind dort platziert eine erstaunliche es6 Funktion Destructuring genannt zu verwenden.

Grundsätzlich es6 verwenden, die die gleiche wie zu tun ist:

const Link = (props) => { 
    const { active, children, onClick } = props; 
    ...

Und ohne ES6 mit, es wäre das gleiche wie zu tun sein:

const Link = (props) => { 
    const active = props.active; 
    const children = props.children; 
    const onClick = props.onClick; 
    ....

Über die Rückkehr Sie Klammern verwenden, wenn Ihre jsx Elemente mehr als 1 Zeile.

Quelle

2016-08-26 15:57:42

Das stimmt nicht genau. Wenn Sie Werte aus einem Objekt als Funktionsparameter extrahieren, sind diese Werte keine Konstanten. –

@AnthonyDugois der Punkt der Frage ist nicht, ob sie sind oder lässt, können Sie eine var zuweisen, um ein let oder ein const abhängig von der Situation zu sein, ist die Absicht, die Art zu zeigen, wie Destructing nicht funktioniert, wenn die Werte innen sein werden Konstanten oder nicht. –

@DiogoCunha danke für die Antwort. Ich denke, dieser Link erklärt gut, wie Destrukturierungsaufgabe mit Funktion funktioniert. https://simonsmith.io/destrukturing-objects-as-function-parameters-in-es6/ Denken Sie, dass Sie das zu Ihrer Antwort hinzufügen können. –

Das Funktionsargument verwendet destructuring assignment, um Werte aus einem Objekt zu extrahieren.

Die Klammern um JSX sind hier, um den Eindruck sauber zu halten.

Sie können dies tun:

return <div> 
    lol 
    </div>

Aber man kann dies nicht tun:

return 
    <div> 
    lol 
    </div>

Also, um die Vertiefung von JSX sauber zu halten, haben Sie die Markup mit Klammern wickeln.

Quelle

2016-08-26 15:57:06

Verstehen es6 und jsx in reagieren

Antwort

Verwandte Themen