Ho creato il componente separato, A, ovviamente, per esercitarmi nella creazione dei tuoi componenti, ma B, anche perché
è davvero la filosofia di base della reazione a dividere la tua app in pezzi più piccoli.
Certo, dipende da te quanto piccolo vuoi dividerlo.
Ogni elemento dell'elenco, ad esempio, potrebbe anche essere il suo vecchio componente e non ci sarebbe nulla di sbagliato in
questo.
L'idea è semplicemente quella di avere file di codice piccoli e gestibili.
E più tardi, una volta aggiunta più logica all'app in modo da poter interagire anche con essa.
E abbiamo cambiato una serie di obiettivi, ad esempio, facendo clic su un pulsante e così via.
Ovviamente, vogliamo essere in grado di gestire molta della logica nel componente dell'elenco obiettivi e non un
componente ovvio.
Quindi dividerlo davvero in componenti ha l'idea di separare le preoccupazioni di mantenere i tuoi file piccoli, focalizzati e gestibili,
che, se lavori in progetti più grandi, è una grande vittoria perché rende molto più facile gestire e
lavorare in un modo così progetto più grande.
Ora, finora, tutto nella nostra app è hardcoded, però.
Ora, più realistico sarebbe che diciamo che il nostro elenco di obiettivi è gestito qui in app.
Sì, come dati.
E vogliamo eseguire il rendering dell'elenco Digo H elementi Timal o J come elementi X in base a tali dati.
Ora lo gestirò qui in Abcess semplicemente perché in seguito aggiungerò qui un altro componente che ci aiuta a
creare nuovi obiettivi.
Ma per ora, aggiungiamo solo una costante normale qui.
Componente funzionale di Tudor perché è una normale funzione JavaScript.
Ovviamente puoi fare di più che semplicemente restituire J's X e il contenuto del disco qui.
Avremo gli obiettivi del mio corso.
Puoi nominarlo come vuoi e questo sarà un array e lo farà array.
Ogni obiettivo può essere un oggetto JavaScript creato qui con la notazione letterale dell'oggetto.
Ovviamente potresti anche creare la tua classe o funzione di costruzione e creare un'istanza per creare un
tale oggetto.
Ora diciamo che ogni obiettivo ha un'idea.
C. G. uno per chorus chorus, chiamane uno e poi ha del testo, diciamo.
E il testo qui è semplicemente il testo.
Ho codificato qui, finisco il corso.
Quindi lo copio.
E qui e dividerò su più righe per rendere più facile la lettura perché non avrò solo un
obiettivo ma libero.
Quindi le idee sono C. G. a NCG gratis, diciamo.
E ora copierò tutto quel testo qui.
Nei miei oggetti qui in Abcess.
Inoltre, quell'ultimo testo.
In questo modo, e lì ora posso anche sbarazzarmi di quella cosa e commerciale qui, non ne abbiamo bisogno qui.
Tutti possiamo mettere il testo in questo modo e reagire lo renderà correttamente.
Quindi ora dobbiamo afferrare l'array Scholes alla mia idea.
Ora, è nella lista degli obiettivi componente di questi obiettivi?
I dati qui dovrebbero alla fine essere emessi.
Quindi dovrebbe essere emesso dinamicamente in questo componente, nel componente dell'elenco degli obiettivi invece di essere difficile.
Quindi possiamo rimuovere questo codice qui.
No, questo ci lascia con due problemi.
Numero uno, come possiamo generare dinamicamente un elenco di dati in J come X?
Ma più importante di quello al momento.
Come possiamo ottenere quell'elenco di dati definito nel componente app nel componente Gollust?
Bene, concentriamoci prima su quello, perché senza quello, non possiamo concentrarci sull'altro problema.
Possiamo passare i dati da un componente all'altro con un concetto chiamato props abbreviazione di proprietà.
Possiamo definire il nostro.
Potresti dire attributi che sono questi oggetti di scena sui nostri componenti.
Quindi, ad esempio, qui nella lista degli obiettivi, potresti dire che abbiamo articoli, attributi o obiettivi, attributi totalmente
a te.
Vado con obiettivi qui.
E quell'attributo o puntello d'oro è il termine comune.
Quindi il sostegno di Gold passa quindi questi dati a quel componente?
Ora, per questo, non uso una stringa qui, che voglio tramandare, ma invece
voglio tramandare la mia struttura di dati JavaScript D array qui e per papà qui, in realtà usiamo un numero
speciale Syntex e J come X. Usiamo le parentesi graffe singole di apertura e chiusura.
Sembra che stiamo creando un oggetto job qui, ma non lo siamo.
Se lo fai all'interno di J è X, che sto facendo qui.
Questo è J is X quindi questo significa che vuoi unire il tuo codice J is X con qualche espressione JavaScript alla fine.
E qui possiamo indicare le competenze di base.
Questa è un'espressione JavaScript valida.
Stiamo solo indicando una costante.
E ciò che Disneyland significa è morto.
React passerà.
Obiettivi del corso qui.
Il valore memorizzato in questa costante in questo caso, questo array in questo posto di J è X.
In questo caso, in questo prop, quindi.
Quindi gli obiettivi saranno un sostegno che contiene un riferimento a questo array ora.
Ora all'interno della lista degli obiettivi, ora possiamo ricevere il sostegno di quell'oro.
Quindi andiamo all'elenco degli obiettivi e vediamo come funziona nell'elenco degli obiettivi.
Abbiamo una funzione, giusto?
Un componente funzionale.
Ora, questa funzione in questo momento non ottiene alcun parametro.
Possiamo cambiarlo.
Possiamo ricevere un parametro di props qui.
Ogni funzione che viene utilizzata come componente di reazione, il che significa che restituisce J è X, riceve anche oggetti di scena.
Questo oggetto oltrepassa automaticamente il tuo componente funzionale reagendo per reagire?
Ed è l'oggetto che raggruppa tutti gli oggetti di scena passati al componente.
Quindi, nel nostro caso, l'obiettivo è quello di puntellare singolo che abbiamo.
Quindi qui avremo un oggetto che ha una proprietà con il nome di obiettivi che detiene il valore passato a
quel prop.
Quindi, in altre parole, qui, potrei bloccare la console, puntare gli obiettivi di partenza, puntare gli obiettivi, perché qui ho nominato
gli obiettivi Propp.
Se hai scelto un nome diverso qui, il che è perfettamente bene, devi usare il nome diverso qui.
Ora, se lo salviamo, al momento non vedremo più i nostri obiettivi.
Ma se apriamo gli strumenti per sviluppatori, vediamo che questi Arae vengono bloccati qui.
E il registro di papà proviene dalla riga sei della lista degli obiettivi, come vedi, che ovviamente è
questo registro qua e là vediamo i nostri dati sugli obiettivi, il che significa che sì, arriva con successo all'interno del componente Gollust.
Il concetto di oggetti di scena è un concetto estremamente importante per reagire, perché è ciò che consente di
passare i dati dal componente A, il componente dell'app al componente B, il componente dell'elenco degli obiettivi.
In questo caso.
Ora diamo un'occhiata a come possiamo generare un elenco di dati in modo dinamico in J come X, perché qui abbiamo un
elenco di obiettivi, una serie di obiettivi e vogliamo emetterlo come elementi di elenco qui nel nostro elenco non
ordinato.