Najlepszy samouczek React montaż W 2024 r. W tym samouczku możesz dowiedzieć się Elementy kompozytowe,
W tym rozdziale omówimy jak korzystać z komponentów, aby nasza aplikacja łatwiej zarządzać.
Następnie owijamy wyjście komponent, komponent zwany HelloMessage "Hello World!":
var HelloMessage = React.createClass({ render: function() { return <h1>Hello World!</h1>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') );
MetodaReact.createClass do wytwarzania komponentów klasy HelloMessage.
<HelloMessage /> instancji komponentu informacji klasowej i wyjściowego.
Należy pamiętać, że rodzime nazwy elementów HTML zaczynać się małą literą, a zwyczaj React nazwy klas zaczyna się od dużej litery, na przykład, nie może być napisany HelloMessage helloMessage. Należy pamiętać, że w dodatku do klasy składnik może zawierać tylko jeden znacznik góry poziomu, albo będą.
Jeśli musimy przekazać parametry do składnika, można użyćthis.props instancji obiektu w następujący sposób:
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="w3big" />, document.getElementById('example') );
Powyższy przykład przez this.props.name atrybutuname dostać.
Należy pamiętać, że podczas dodawania atrybutów, klasa atrybutów jest napisany className, na nieruchomość być napisane htmlFor, to dlatego, że klasy i dla JavaScript słowa zastrzeżone.
Możemy utworzyć wiele elementów w jeden składnik, a mianowicie różnych elementów funkcjonalnych punktu separacji.
Poniższe przykłady Osiągnęliśmy nazwę i adres URL witryny wyjście komponentów:
var WebSite = React.createClass({ render: function() { return ( <div> <Name name={this.props.name} /> <Link site={this.props.site} /> </div> ); } }); var Name = React.createClass({ render: function() { return ( <h1>{this.props.name}</h1> ); } }); var Link = React.createClass({ render: function() { return ( <a href={this.props.site}> {this.props.site} </a> ); } }); React.render( <WebSite name="本教程" site=" http://www.w3write.com" />, document.getElementById('example') );
Przykłady składników stosowanych w Luckdrive i połączyć składniki do produkcji odpowiedniej informacji, która ma instancję internetowej Imię i link.