Composants de réaction
Composants React
Dans ce chapitre, nous verrons comment utiliser les composants pour rendre nos applications plus faciles à gérer.
Ensuite, nous scellons un composant qui génère "Hello World!". Le composant est nommé HelloMessage :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello World！</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Analyse de l'instance :
Méthode React.createClass est utilisé Générer une classe de composant HelloMessage.
<HelloMessage /> Instanciez la classe de composant et affichez le message.
Notez que les noms d'éléments HTML natifs commencent par des lettres minuscules, tandis que les noms de classes React personnalisées commencent par des lettres majuscules. Par exemple, HelloMessage ne peut pas être écrit comme helloMessage. De plus, vous devez noter que la classe de composant ne peut contenir qu'une seule étiquette de niveau supérieur, sinon une erreur sera signalée.
Si nous devons transmettre des paramètres au composant, nous pouvons utiliser l'objet this.props L'exemple est le suivant :
Instance.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="php" />,
document.getElementById('example')
);
</script>
</body>
</html> Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Dans l'instance ci-dessus , l'attribut name est transmis via ceci props.name pour être obtenu.
Notez que lors de l'ajout d'attributs, L'attribut class doit être écrit sous la forme className et l'attribut for doit être écrit sous la forme htmlFor. En effet, class et for sont des mots réservés en JavaScript.
Composant composite
On peut synthétiser un composant en créant plusieurs composants, c'est-à-dire en séparant les différents points fonctionnels du composant.
Dans l'exemple suivant, nous avons implémenté le composant qui génère le nom et l'URL du site Web :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
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="php中文网" site=" http://www.php.cn" />,
document.getElementById('example')
);
</script>
</body>
</html>En cours d'exécution Exemple»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Dans l'instance, le composant WebSite utilise les composants Name et Link pour afficher les informations correspondantes, ce qui signifie ce site Web a des instances de nom et de lien.
