React Stateless wird als „{props.xxx}“ geschrieben. Seine zustandslose Komponente wird hauptsächlich zum Definieren von Vorlagen, zum Empfangen von Daten verwendet, die von den Requisiten der übergeordneten Komponente übergeben werden, und zum Füllen der Requisiten mit dem Ausdruck „{props.xxx}“. in die Vorlage ein.
Die Betriebsumgebung dieses Artikels: Windows7-System, React17.0.1, Dell G3.
Wie kann man in React zustandslos schreiben?
Die Schreibmethode und der Unterschied zwischen zustandslosen Komponenten und zustandsbehafteten Komponenten in React
Komponenten in React sind hauptsächlich in zwei Kategorien unterteilt: zustandslose Komponenten und zustandsbehaftete Komponenten.
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}依然获取到了值
);
};
};Dies ist einfacher zu verstehen, da die render()-Methode eine Methode für den Unterkomponenten-Prototyp ist. Wenn diese entfernt wird, kann sie nicht abgerufen werden.
Dann stellt sich die Frage: Was ist, wenn wir im Konstruktor auf Requisiten zugreifen möchten? An diesem Punkt müssen wir einen Props-Parameter im Konstruktorkonstruktor übergeben, damit wir auf das Props-Attribut der Unterkomponenteninstanz zugreifen können. Wie folgt:
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>
);
};
};Tatsächlich sind die Werte von props.name und this.props.name gleich, aber sie unterscheiden sich immer noch. Die props in props.name sind die Attributprops von Unterkomponente, aber dies. Die Requisiten in props.name sind nicht die Attribut-Requisiten der Unterkomponente, aber diese Requisiten werden tatsächlich an die übergeordnete Klasse Component übergeben, wenn die Super-Methode aufgerufen wird. also ist this.props.name das props-Attribut in der übergeordneten Component-Klasse. Schauen Sie sich den Quellcode von React an: 
Haben Sie festgestellt, dass die Supermethode der Unterklasse die Props-Parameter an die übergeordnete Klasse Component übergibt und die Component die Props-Parameter an ihre Instanzattribute props anhängt? Daher können Sie „props.xxx“ im Konstruktor nur verwenden, indem Sie den Parameter „props“ an die Methode „super“ übergeben. Wenn der Parameter „props“ nicht in der Methode „super“ übergeben wird, wird beim Abrufen des Werts von „this.props“ ein Fehler gemeldet. Name. Rufen Sie this.props ab und zeigen Sie es als undiffed an: wie folgt:
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>
);
};
};Der Kern dieser Schreibmethode besteht darin, die Instanzattribute props der Unterkomponente Header den Instanzattributen state.nameOne und state.nameTwo der Unterkomponente zuzuweisen. Komponenten-Header. Einfach ausgedrückt handelt es sich um die Header-Unterbaugruppe. Die Komponente erstellt ein Statusattribut und weist dann ihrem eigenen Statusattribut ihr eigenes Props-Attribut zu.
Warum wird this.props undefiniert ausgedruckt? Da es sich bei Requisiten um Parameter handelt, die beim Aufrufen der Unterkomponente übergeben werden, kann im Konstruktor nicht auf Requisiten zugegriffen werden. Daher besteht für this.props.name kein Zweifel, dass ein Fehler gemeldet wird.
Wenn Sie also für die Props-Parameter im Konstruktor und die Props-Parameter in Super nicht this.props und props im Konstruktor verwenden, müssen Sie überhaupt keine Parameter übergeben. Andernfalls übergeben Sie die Referenz. Die erhaltenen Werte sind jedoch für this.props und props dieselben, sodass Sie beide schreiben können. Beide Parameter sind jedoch in der offiziellen Dokumentation aufgeführt. Der Genauigkeit halber schreiben wir sie alle auf.
Allerdings gefällt mir persönlich diese Art zu schreiben immer noch.
constructor(props) {
super(props);
this.state = {
name: props.name
}
};Der ohne das ist der Wert, und der mit dem ist der Schlüssel.
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}依然获取到了值
);
};
};Dies ist einfacher zu verstehen, da die render()-Methode eine Methode für den Unterkomponenten-Prototyp ist. Wenn diese entfernt wird, kann sie nicht abgerufen werden.
Dann stellt sich die Frage: Was ist, wenn wir im Konstruktor auf Requisiten zugreifen möchten? An diesem Punkt müssen wir einen Props-Parameter im Konstruktorkonstruktor übergeben, damit wir auf das Props-Attribut der Unterkomponenteninstanz zugreifen können. Wie folgt:
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>
);
};
};Tatsächlich sind die Werte von props.name und this.props.name gleich, aber sie unterscheiden sich immer noch. Die props in props.name sind die Attributprops von Unterkomponente, aber dies. Die Requisiten in props.name sind nicht die Attribut-Requisiten der Unterkomponente, aber diese Requisiten werden tatsächlich an die übergeordnete Klasse Component übergeben, wenn die Super-Methode aufgerufen wird. also ist this.props.name das props-Attribut in der übergeordneten Component-Klasse. Schauen Sie sich den Quellcode von React an:
Haben Sie festgestellt, dass die Supermethode der Unterklasse die Props-Parameter an die übergeordnete Klasse Component übergibt und die Component die Props-Parameter an ihre Instanzattribute props anhängt? Daher können Sie „props.xxx“ im Konstruktor nur verwenden, indem Sie den Parameter „props“ an die Methode „super“ übergeben. Wenn der Parameter „props“ nicht in der Methode „super“ übergeben wird, wird beim Abrufen des Werts von „this.props“ ein Fehler gemeldet. Name. Rufen Sie this.props ab und zeigen Sie es als undiffed an: wie folgt:
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>
);
};
};Der Kern dieser Schreibmethode besteht darin, die Instanzattribute props der Unterkomponente Header den Instanzattributen state.nameOne und state.nameTwo der Unterkomponente zuzuweisen. Komponenten-Header. Einfach ausgedrückt handelt es sich um die Header-Unterbaugruppe. Die Komponente erstellt ein Statusattribut und weist dann ihrem eigenen Statusattribut ihr eigenes Props-Attribut zu.
Warum wird this.props undefiniert ausgedruckt? Da es sich bei Requisiten um Parameter handelt, die beim Aufrufen der Unterkomponente übergeben werden, kann im Konstruktor nicht auf Requisiten zugegriffen werden. Daher besteht für this.props.name kein Zweifel, dass ein Fehler gemeldet wird.
Wenn Sie also für die Props-Parameter im Konstruktor und die Props-Parameter in Super nicht this.props und props im Konstruktor verwenden, müssen Sie überhaupt keine Parameter übergeben. Andernfalls übergeben Sie die Referenz. Die erhaltenen Werte sind jedoch für this.props und props dieselben, sodass Sie beide schreiben können. Beide Parameter sind jedoch in der offiziellen Dokumentation aufgeführt. Der Genauigkeit halber schreiben wir sie alle auf.
Allerdings gefällt mir persönlich diese Art zu schreiben immer noch.
constructor(props) {
super(props);
this.state = {
name: props.name
}
};Der ohne das ist der Wert, und der mit dem ist der Schlüssel.
Empfohlenes Lernen: „
Video-Tutorial reagierenDas obige ist der detaillierte Inhalt vonWas ist zustandsloses Schreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So erhalten Sie ein Token
Verwendung der Get-Funktion in C-Sprache
Was ist LAN?
Der Excel-Eingabewert ist unzulässig
So lösen Sie das Problem, dass kein Internetzugang möglich ist, wenn der Computer mit dem WLAN verbunden ist
So richten Sie unter XP ein lokales Netzwerk ein
Wird die Bitcoin-Inschrift verschwinden?
So erstellen Sie einen Bitmap-Index in MySQL
