React.js: Czy możliwe jest odwoływanie się do komponentów potomnych przestrzeni nazw przy jednoczesnym korzystaniu z JSX?

Question

Więc powiedzmy, że mam komponent o nazwie ImageGrid i jest zdefiniowana jak poniżej:

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

Jak widać to obejmuje dziecko reaguje składnik o nazwie ImageGridItem. Który jest zdefiniowany poniżej.

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

Działa to dobrze, tak długo, jak oba są bezpośrednio właściwości window. Ale to jest okropne, więc chciałbym pogrupować wszystkie moje komponenty reagujące na przykład w przestrzeni nazw window.myComponents.

Więc definicje zmienić:

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

Problem jest teraz, że jak ImageGrid dotyczy <ImageGridItem /> w to uczynić funkcji(), wersja JS to zostanie skompilowany się JS jako ImageGridItem() co oczywiście jest nieokreślone, ponieważ obecnie jest to myComponents.ImageGridItem() i reaguje na skargi, że nie może go znaleźć.

Tak, zdaję sobie sprawę, że nie mogę po prostu napisać kodu JSX dla tego komponentu i ręcznie wykonać myComponents.ImageGridItem({attr: 'val'}), ale naprawdę wolałbym używać skrótu do składni html JSX, ponieważ jest on znacznie łatwiejszy w czytaniu i rozwijaniu.

Czy istnieją sposoby na uruchomienie tej funkcji przy użyciu składni <ImageGridItem /> dla dzieci? A jeśli nie, czy możliwe jest zdefiniowanie przestrzeni nazw JS w JSX?

Answer 1

wyciągnąć wniosek ten był po prostu połączyły:

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

To pozwala na pisanie rzeczy jak <myComponents.ImageGridItem /> w reagują 0.11 i nowsze.

Powiedziawszy, odpowiedni system modułów jest zalecanym sposobem zarządzania zależnościami, aby uniknąć wciągania kodu, którego nie potrzebujesz.

Answer 2

Obecnie nie ma sposobu, aby to zrobić. Namespacing z JSX znajduje się na liście zadań.

Większość osób korzysta z pewnego rodzaju systemu modułów (browserify, webpack, requirejs), które zastępują tworzenie przestrzeni nazw i umożliwiają łatwe korzystanie z komponentów. Jest wiele innych korzyści, więc bardzo polecam zajrzenie w to.