2017-03-10 5 views
0

Ich bin neu zu reagieren und verwirrt mit dem Konzept der Komponente. Ich weiß, dass eine Komponente in einer anderen enthalten sein kann, aber diesmal sehe ich in einer createClass eine andere createClass.createClass in createClass in react.js

view-source: http://chrisharrington.github.io/demos/react-controls/calendar.html

in wie 116, wie es wie sieht in es6?

+0

Es gibt keine createClass in einer anderen Klasse. Sie erstellen ** Kalender, DayNames und Week ** unabhängig als Komponenten. – Hosar

+0

@Hosar kannst du 'var DayNames = React.createClass ({...})' betrachten? Warum benutzt man nicht einfach eine normale Funktion? Es ist eine Komponente, wie sieht das in es6 aus? – Mellisa

Antwort

0

Als Beispiel, hier ist die Komponente mit React.createClass.

var DayNames = React.createClass({ 
    render: function() { 
    return <div className="week names"> 
     <span className="day">Sun</span> 
     <span className="day">Mon</span> 
     <span className="day">Tue</span> 
     <span className="day">Wed</span> 
     <span className="day">Thu</span> 
     <span className="day">Fri</span> 
     <span className="day">Sat</span> 
    </div>; 
    } 
}); 

Hier ist es wieder als zustandslose Funktionskomponente.

function DayNames() { 
    return <div className="week names"> 
    <span className="day">Sun</span> 
    <span className="day">Mon</span> 
    <span className="day">Tue</span> 
    <span className="day">Wed</span> 
    <span className="day">Thu</span> 
    <span className="day">Fri</span> 
    <span className="day">Sat</span> 
    </div>; 
} 

Und hier ist es wieder als ES2015-Klasse.

class DayNames extends React.Component { 
    render() { 
    return <div className="week names"> 
     <span className="day">Sun</span> 
     <span className="day">Mon</span> 
     <span className="day">Tue</span> 
     <span className="day">Wed</span> 
     <span className="day">Thu</span> 
     <span className="day">Fri</span> 
     <span className="day">Sat</span> 
    </div>; 
    } 
} 
+0

Funktionskomponente innerhalb oder außerhalb der Klasse deklarieren? Ich muss alles in es6 umwandeln. – Mellisa

+0

Eine Funktionskomponente ist eine Alternative zu einer Klassenkomponente. Sie können sie verwenden, wenn Ihre Komponente 'this.state' nicht verwendet. –

0

Auf ES6 und reagieren 0,14 oben, können Sie auch eine zustandslose Funktionskomponente, z.

const DayNames =() => ( 
    <div className="week names"> 
    <span className="day">Sun</span> 
    <span className="day">Mon</span> 
    <span className="day">Tue</span> 
    <span className="day">Wed</span> 
    <span className="day">Thu</span> 
    <span className="day">Fri</span> 
    <span className="day">Sat</span> 
    </div> 
) 
+0

Was bedeutet es von funktional? Ich sehe keine Funktion in dieser Funktion/Komponente. Die 'Rückkehr' wird hier nicht benötigt? – Mellisa

+0

@Mellisa Es ist eine Funktion anstelle der Klasse ES6 ohne das Schlüsselwort 'function' wird durch'() 'ersetzt, dann wird' return' nicht benötigt, da es von einem Ausdruck '( –

+0

10) eingeschlossen ist Warum gibt es hier keine Renderfunktion? – Mellisa