2014-05-14 6 views
7

Quindi cerchiamo di dire che ho un componente chiamato ImageGrid ed è definito come di seguito:React.js: è possibile assegnare un nome ai componenti figlio mentre si utilizza ancora JSX per fare riferimento a essi?

window.ImageGrid = React.createClass({ 
    render: function() { 
     return (
      <div className="image-grid"> 
       <ImageGridItem /> 
      </div> 
     ); 
    } 
}); 

Come si può vedere che comprende un bambino reagisce componente chiamato ImageGridItem. Quale è definito sotto.

window.ImageGridItem = React.createClass({ 
    render: function() { 
     return (
      <div className="item-container">something</div> 
     ); 
    } 
}); 

Questo funziona bene fino a quando entrambi sono direttamente le proprietà di window. Ma questo è un po 'orribile, quindi mi piacerebbe raggruppare tutti i miei componenti di reazione sotto uno spazio dei nomi di window.myComponents per esempio.

Così le definizioni cambiano a:

window.myComponents.ImageGrid  = React.createClass({...}); 
window.myComponents.ImageGridItem = React.createClass({...}); 

Il problema ora è che, come ImageGrid si riferisce a <ImageGridItem /> in esso è rendere la funzione(), la versione JS di questo viene compilato fuori a JS come ImageGridItem() che naturalmente è indefinito dal momento che ora è in realtà myComponents.ImageGridItem() e reagisce lamentandosi di non riuscire a trovarlo.

Sì. Mi rendo conto che non posso scrivere JSX per quel componente incluso e manualmente fare myComponents.ImageGridItem({attr: 'val'}) ma preferirei davvero utilizzare la scorciatoia sintassi html JSX perché è molto più facile da leggere e sviluppare con.

Esistono modi per farlo funzionare mentre si utilizza ancora la sintassi <ImageGridItem /> per bambini? E se non è possibile definire lo spazio dei nomi JS all'interno del JSX?

risposta

9

Questa attrazione richiesta era appena fusa:

https://github.com/facebook/react/pull/760

Esso consente di scrivere le cose come <myComponents.ImageGridItem /> in Reagire 0.11 e successivi.

Detto questo, un sistema di moduli adeguato è il modo consigliato di gestire le dipendenze per evitare di inserire codice che non è necessario.

+0

Ma anche se si utilizza un sistema di moduli, cosa succede se si restituiscono più classi di reazione da un modulo? Come faresti riferimento a ogni singola classe in questo caso? Ho pubblicato una domanda correlata qui su questo problema esatto: http://stackoverflow.com/q/23739166/26510 –

+1

Il modo più semplice è quello di dividere ogni classe in un modulo separato. –

+0

La richiesta pull è stata unificata, quindi se ottieni l'ultimo dal master repo, starai bene! –

2

Attualmente, non c'è un modo per farlo. Il namespace con JSX è nella lista delle cose da fare.

La maggior parte delle persone utilizza un qualche tipo di sistema di moduli (browserify, webpack, requirejs), che sostituiscono il namespacing e consentono l'utilizzo semplice dei componenti. Ci sono molti altri vantaggi, quindi consiglio vivamente di esaminarlo.