React stateless s'écrit "{props.xxx}". Son composant sans état est principalement utilisé pour définir des modèles, recevoir les données transmises par les accessoires du composant parent et utiliser l'expression de "{props.xxx}" pour remplir les accessoires. dans le modèle.
L'environnement d'exploitation de cet article : système Windows7, React17.0.1, Dell G3.
Quelle est la façon d'écrire apatride en réaction ?
La méthode d'écriture et la différence entre les composants sans état et les composants avec état dans React
Les composants dans React sont principalement divisés en deux catégories : les composants sans état et les composants avec état.
var Header = (props) = (
<p>{props.xxx}</p>
);
export default Headerclass Home extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
<header></header> //也可以写成<header></header>
)
}
}
export default Homeclass Home extends React.Component {
constructor() {
super();
};
render (){
return(
<p>
<header></header>
</p>
);
};
};
class Header extends React.Component {
constructor() {
super();
};
render() {
return (
<p>{this.props.name}</p> //构造函数中并没有传递props属性，这里通过{this.props.name}依然获取到了值
);
};
};C'est plus facile à comprendre, car la méthode render() est une méthode sur le prototype du sous-composant, il faut y accéder via ceci. Si celle-ci est supprimée, elle ne peut pas être obtenue.
Ensuite, la question se pose : et si nous voulons accéder aux accessoires dans le constructeur ? À ce stade, nous devons passer un paramètre props dans le constructeur constructor afin de pouvoir accéder à l'attribut props sur l'instance du sous-composant. Comme suit :
class Header extends React.Component {
constructor(props) {
super();
this.name = props.name; //获取到子组件实例上的props.name属性，赋值给实例属性name
};
render() {
return (
<p>{this.name}</p>
);
};
};class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
nameOne: props.name,
nameTwo: this.props.name //super()方法中传递了props属性，this.props才可以获取到name属性
}
};
render() {
return (
<p>{this.state.nameOne}{this.state.nameTwo}</p>
);
};
};En fait, les valeursde props.name et this.props.name sont les mêmes, mais elles sont toujours différentes. Les props dans props.name sont les attributs props du. sous-composant, mais ceci. Les accessoires dans props.name ne sont pas les accessoires d'attribut du sous-composant, bien que les valeurs soient les mêmes, ces accessoires sont en fait transmis à la classe parent Component lorsque la super méthode est appelée, donc ceci. .props.name obtient est l'attribut props dans la classe parent Component. Jetez un œil au code source de React : 
Avez-vous constaté que la super méthode de la sous-classe transmet les paramètres des accessoires au composant de classe parent et que le composant monte les paramètres des accessoires sur ses accessoires d'attribut d'instance. Par conséquent, vous ne pouvez utiliser ceci, props.xxx dans le constructeur qu'en passant le paramètre props à la super méthode. Si le paramètre props n'est pas transmis dans la super méthode, une erreur sera signalée lors de l'obtention de la valeur de this.props. nom. Obtenez this.props et affichez-le sans différence : comme suit :
class Header extends React.Component {
constructor(props) {
super();
this.state = {
nameOne: this.props.name,
nameTwo: this.props
};
console.log(this.props.name); //报错
console.log(this.props); //undifined
};
render() {
return (
<p>{this.state.nameOne}{this.state.nameTwo}</p>
);
};
};L'essence de cette méthode d'écriture est d'attribuer les accessoires d'attribut d'instance du sous-composant Header aux attributs d'instance state.nameOne et state.nameTwo du sous-composant. En-tête du composant. En termes simples, il s'agit du sous-assemblage En-tête. Le composant crée un attribut d'état, puis attribue son propre attribut props à son propre attribut d'état.
Pourquoi this.props affiche-t-il undefined ? Étant donné que les props sont des paramètres transmis lors de l'appel du sous-composant, les props ne sont pas accessibles à l'intérieur du constructeur, donc pour this.props.name, il ne fait aucun doute qu'une erreur sera signalée.
Donc, pour les paramètres props dans le constructeur et les paramètres props dans super, si vous n'utilisez pas this.props et props dans le constructeur, vous n'avez pas du tout besoin de transmettre de paramètres. Sinon, transmettez la référence. Mais les valeurs obtenues sont les mêmes pour this.props et props, vous pouvez donc écrire l'une ou l'autre. Cependant, les deux paramètres sont écrits dans la documentation officielle. Alors par souci de rigueur, notons-les tous.
Cependant, personnellement, j’aime toujours cette façon d’écrire.
constructor(props) {
super(props);
this.state = {
name: props.name
}
};Celui sans ceci est la valeur, et celui avec ceci est la clé.
var Header = (props) = (
<p>{props.xxx}</p>
);
export default Headerclass Home extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
<header></header> //也可以写成<header></header>
)
}
}
export default Homeclass Home extends React.Component {
constructor() {
super();
};
render (){
return(
<p>
<header></header>
</p>
);
};
};
class Header extends React.Component {
constructor() {
super();
};
render() {
return (
<p>{this.props.name}</p> //构造函数中并没有传递props属性，这里通过{this.props.name}依然获取到了值
);
};
};C'est plus facile à comprendre, car la méthode render() est une méthode sur le prototype du sous-composant, il faut y accéder via ceci. Si celle-ci est supprimée, elle ne peut pas être obtenue.
Ensuite, la question se pose : et si nous voulons accéder aux accessoires dans le constructeur ? À ce stade, nous devons passer un paramètre props dans le constructeur constructor afin de pouvoir accéder à l'attribut props sur l'instance du sous-composant. Comme suit :
class Header extends React.Component {
constructor(props) {
super();
this.name = props.name; //获取到子组件实例上的props.name属性，赋值给实例属性name
};
render() {
return (
<p>{this.name}</p>
);
};
};class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
nameOne: props.name,
nameTwo: this.props.name //super()方法中传递了props属性，this.props才可以获取到name属性
}
};
render() {
return (
<p>{this.state.nameOne}{this.state.nameTwo}</p>
);
};
};En fait, les valeursde props.name et this.props.name sont les mêmes, mais elles sont toujours différentes. Les props dans props.name sont les attributs props du. sous-composant, mais ceci. Les accessoires dans props.name ne sont pas les accessoires d'attribut du sous-composant, bien que les valeurs soient les mêmes, ces accessoires sont en fait transmis à la classe parent Component lorsque la super méthode est appelée, donc ceci. .props.name obtient est l'attribut props dans la classe parent Component. Jetez un œil au code source de React :
Avez-vous constaté que la super méthode de la sous-classe transmet les paramètres des accessoires au composant de classe parent et que le composant monte les paramètres des accessoires sur ses accessoires d'attribut d'instance. Par conséquent, vous ne pouvez utiliser ceci, props.xxx dans le constructeur qu'en passant le paramètre props à la super méthode. Si le paramètre props n'est pas transmis dans la super méthode, une erreur sera signalée lors de l'obtention de la valeur de this.props. nom. Obtenez this.props et affichez-le sans différence : comme suit :
class Header extends React.Component {
constructor(props) {
super();
this.state = {
nameOne: this.props.name,
nameTwo: this.props
};
console.log(this.props.name); //报错
console.log(this.props); //undifined
};
render() {
return (
<p>{this.state.nameOne}{this.state.nameTwo}</p>
);
};
};L'essence de cette méthode d'écriture est d'attribuer les accessoires d'attribut d'instance du sous-composant Header aux attributs d'instance state.nameOne et state.nameTwo du sous-composant. En-tête du composant. En termes simples, il s'agit du sous-assemblage En-tête. Le composant crée un attribut d'état, puis attribue son propre attribut props à son propre attribut d'état.
Pourquoi this.props affiche-t-il undefined ? Étant donné que les props sont des paramètres transmis lors de l'appel du sous-composant, les props ne sont pas accessibles à l'intérieur du constructeur, donc pour this.props.name, il ne fait aucun doute qu'une erreur sera signalée.
Donc, pour les paramètres props dans le constructeur et les paramètres props dans super, si vous n'utilisez pas this.props et props dans le constructeur, vous n'avez pas du tout besoin de transmettre de paramètres. Sinon, transmettez la référence. Mais les valeurs obtenues sont les mêmes pour this.props et props, vous pouvez donc écrire l'une ou l'autre. Cependant, les deux paramètres sont écrits dans la documentation officielle. Alors par souci de rigueur, notons-les tous.
Cependant, personnellement, j’aime toujours cette façon d’écrire.
constructor(props) {
super(props);
this.state = {
name: props.name
}
};Celui sans ceci est la valeur, et celui avec ceci est la clé.
Apprentissage recommandé : "
Tutoriel vidéo ReactCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment implémenter la technologie de conteneur Docker en Java
l'espacement des lettres
Utilisation de la fonction fgets
Comment utiliser chaque fonction dans js
Introduction à l'utilisation de la fonction stickline
Pourquoi les Himalayens ne peuvent-ils pas se connecter à Internet ?
Impossible de localiser le point d'entrée du programme dans la bibliothèque de liens dynamiques
processus d'affichage Linux
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
