co tworzy createContainer w Meteorcie za pomocą React?

Question

Pracuję nad Meteor używając samouczka React i próbuję zrozumieć createContainer(). Od czytania tutaj:

http://guide.meteor.com/v1.3/react.html#using-createContainer

myślę, że jest to funkcja zdefiniowana w meteor/react-meteor-data, który jest używany do ładowania danych. W tym konkretnym przypadku pobiera dane z bazy danych Mini Mongo (o nazwie Task). Moje pytanie brzmi: co robi drugi argument tworzenia Kontenery? (o nazwie App tutaj). Dziękuję Ci!

class App extends Component { 
    //...class definition 
} 

export default createContainer(() => { 
    return { 
    //Tasks is a Mongo.Collection 
    //returns the matching rows (documents) 
    //here we define the value for tasks member 
    tasks: Tasks.find({}, { sort: { createdAt: -1} }).fetch(), 
    }; 
}, App); 

Answer 1

Zadawanie współpracownika, to jest odpowiedź, że mam.

createContainer „s Drugi argument jest nazwą klasy, które chcesz dane mają być zamknięte w Będzie on wtedy«Dane reaktywny» ponieważ za każdym razem, gdy dane w DB zostaną zmienione, rekwizyty klasy zostaną zmienione tak, aby zawierały nowe dane.

Należy również wywołać funkcję createContainer() poza definicją klasy.

Jeśli ktokolwiek ma coś do dodania, prosimy o przesłanie go.

Answer 2

Komponent utworzony za pomocą createContainer jest prostym opakowaniem wokół rzeczywistego komponentu, ale ma moc, ponieważ obsługuje reaktywność Meteor'a, więc nie musisz się zastanawiać, jak zachować aktualność wszystkich danych podczas zmiany danych (np. ładowanie subskrypcji, zmiana ReactiveVar/Session)

Komponent React jest po prostu funkcją JavaScript, wywoływany jest za pomocą zestawu argumentów (rekwizytów) i generuje wynik. React nie wie, czy twoje dane się zmieniły, chyba że tak powiesz. Komponent utworzony za pomocą createContainer ponownie się wyrenderuje po zmianie danych reaktywnych i wysłaniu nowego zestawu rekwizytów do rzeczywistego komponentu.

Opcje createContainer to funkcja zwracająca żądane dane reaktywne oraz komponent, który chcesz zawijać. To naprawdę proste, a funkcja renderowania dla createContainer jest dosłownie jeden wiersz:

return <Component {...this.props} {...this.data} />; 

to przechodzi wszelkie rekwizyty przekazać do zawiniętego komponentu, plus dodaje reaktywna źródło danych skonfigurować.

Można zobaczyć kod dla siebie tutaj: https://github.com/meteor/react-packages/blob/devel/packages/react-meteor-data/createContainer.jsx

Składnia <Component {...this.props} znany jest jako ikona i zasadniczo zmienia:

{ 
    prop1: 'some value', 
    prop2: 'another value' 
} 

do:

<Component prop1='some value' prop2='another value /> 

(Patrz: https://facebook.github.io/react/docs/jsx-spread.html)

Answer 3

Drugi argumentto nazwa klasy, w której chcesz przekazać rekwizyty. Powiedzmy createContainer Zwraca prop zwane firstName Teraz, gdy pojawia się nowa firstName wpis lub uaktualniony firstName w db, następnie createContainer ma zamiar zadzwonić do drugiego argumentu, który jest nasza nazwa klasy z rekwizytem, ​​że posiada tj firstName.

Mam nadzieję, że ma to sens.