Jak załadować komponent reagujący zapisany w kodzie JSX z mojego kodu JavaScript

Question

Jestem nowym użytkownikiem reactjs, więc przepraszam, jeśli nie umiem poprawnie sformułować tego pytania. Mam więc ten plik skryptu jsx, który renderuje moje komponenty reagujące na mój widok natychmiast po załadowaniu. Początkowo w tym pliku skryptu nie mam żadnych danych do pokazania w moim komponencie, więc nie wyrenderowuję żadnego z moich komponentów podrzędnych. Jednak w pewnym późniejszym momencie, kiedy otrzymam dane od, powiedzmy usługi internetowej, bardzo chciałbym ponownie renderować komponenty z tymi danymi.

Komponenty w pliku skryptu JSX nie mają stanu, po prostu powinny pokazywać dane, które przekazuję.

Skrypt JSX ładuje się poprawnie i renderuje komponenty z początkowo brakiem danych określonych w pliku JSX. Jednak gdy próbuję ponownie renderować ten komponent w innym pliku JavaScript, pojawia się błąd referencyjny, a komponent jest niezdefiniowany.

Czy naród JSX,/*** @jsx React.DOM */tworzy zupełnie inny obszar nazw? Jeśli tak, to w jaki sposób mogę uzyskać do niego dostęp? I jaki jest najlepszy sposób ponownego renderowania komponentów za pomocą nowych danych spoza pliku skryptu JSX. Z góry dziękuję! :)

/** Edytowany */ faceci, przepraszam za nie dodawanie kodu .. zamiast tego pozwól mi postawić pytanie proste .. jak mogę uzyskać dostęp do komponentu reagowania w moim skrypcie jsx z mojego pliku javascript?

/** * redakcją/ Alright guys, tutaj jest przykład kodu:

var Avatar = React.createClass({ 
render: function() { 
return (
    <div> 
    <ProfilePic username={this.props.username} /> 
    <ProfileLink username={this.props.username} /> 
    </div> 
); 
} 
}); 

var ProfilePic = React.createClass({ 
render: function() { 
return (
    <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} /> 
); 
} 
}); 

var ProfileLink = React.createClass({ 
render: function() { 
return (
    <a href={'http://www.facebook.com/' + this.props.username}> 
    {this.props.username} 
    </a> 
); 
} 
}); 

React.render(
<Avatar username="pwh" />, 
document.getElementById('example') 
); 

Więc, powyższy kod może być osadzony w tagach html specifed jako skrypt JSX lub obciążonych zewnętrznie. Zwróć uwagę na nazwę użytkownika w elemencie Avatar (najbardziej kontestujący komponent w heirarchii), problem polega na tym, w jaki sposób możemy ponownie zepsuć komponent Avatar w innym pliku javasccript z inną nazwą użytkownika? Wszystko w porządku i dobrze, jeśli ustawisz to w ten sposób i uciekniesz. Przy pierwszym ładowaniu komponentu ustawia on pwh jako nazwę użytkownika. Jak jednak uzyskać dostęp do tego elementu z mojego javascript (tj. Poza skryptem jsx) i wysłać go z nową wartością nazwy użytkownika? Czy to możliwe?

Answer 1

Myślę, że występują problemy b/c podczas wykonywania zwykłego pliku JS, plik JSX był nadal tłumaczony przez JSXTransformer, a zatem nie został przetworzony przez przeglądarkę. Dlatego symbole wewnątrz plików JSX nie zostały jeszcze zdefiniowane

Istnieją dwa podejścia byłoby Polecam:

do celów rozwojowych/Prototypy: dodawanie /** @jsx React.DOM */ do zwykłego pliku JS, jak również i upewnij się, że to ten js plik na stronie HTML jako type="text/jsx", aby Transformer również próbował tłumaczyć.

Dla kodu, który jest oznaczało, aby przejść do produkcji, zainstalować kompilator JSX npm install -g react-tools, a następnie uruchomić jsx <src file> <output filename> przekonwertować plik JSX do regularnego javascript

zobaczyć to: http://facebook.github.io/react/docs/tooling-integration.html

PS: owijasz punkt wejścia aplikacji wewnątrz wywołania zwrotnego DOM.ready lub czegoś podobnego, prawda?