简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Deaktivierte JS-Funktionen beeinträchtigen den normalen Betrieb von HTML/JS/Babel-Code
P粉448346289
P粉448346289 2023-08-14 15:14:58
0
1
579
<p>Im folgenden Code habe ich erwartet (Konsole protokolliert), dass das Objekt <code>props</code> nur das Mitglied <code>className</code> enthielt, aber es enthielt das Mitglied: <p> ;code>{ Klassenname, ID, Ticket, Anfrage }</code>. Wenn ich jedoch den Parameter <code>...others</code> aus <strong>Unused Function</strong><code>NullComp</code> entferne, dann ist das Objekt <code>props< Das einzige Mitglied von ;/code> ist: <code>className</code>, was genau das ist, was ich ursprünglich erwartet hatte. </p> <p>Sie können es selbst ausprobieren, indem Sie den folgenden Code ausführen: </p> <p>Verwenden: <code>...andere</code>: </p> <p><br /></p> <pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html> <Kopf> <meta charset="UTF-8" /> <title>Test</title> <script src="https://unpkg.com/react/umd/react.produktion.min.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.produktion.min.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <Körper> <div id="root"></div> <script type="text/babel"> Funktion GoalComp({ AUSWEIS, Fahrkarte, Anfrage, ...Requisiten }) { console.log(props); return <div>Independent Retriever</div>; } </script> <script type="text/babel"> function NullComp({ timeRanges, ...others }) { null zurückgeben; } </script> <script type="text/babel"> const { useState, useEffect } = React; const App = () => { zurückkehren ( <GoalComp className="mt-10" id="1" Ticket="IT-ABCD" request="Frieden und Liebe" /> ); }; ReactDOM.render(<App />, document.querySelector("#root")); </script> </body> </html></pre> <p><br /></p> <p>不使用：<code>...others</code>：</p> <p><br /></p> <pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html> <Kopf> <meta charset="UTF-8" /> <title>Test</title> <script src="https://unpkg.com/react/umd/react.produktion.min.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.produktion.min.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <Körper> <div id="root"></div> <script type="text/babel"> Funktion GoalComp({ Ausweis, Fahrkarte, Anfrage, ...Requisiten }) { console.log(props); return <div>Independent Retriever</div>; } </script> <script type="text/babel"> Funktion NullComp({ timeRanges }) { null zurückgeben; } </script> <script type="text/babel"> const { useState, useEffect } = React; const App = () => { zurückkehren ( <GoalComp className="mt-10" id="1" Ticket="IT-ABCD" request="Frieden und Liebe" /> ); }; ReactDOM.render(<App />, document.querySelector("#root")); </script> </body> </html></pre> <p><br /></p> <p>我在这里漏掉了什么？</p> <p>谢谢！</p>
P粉448346289
P粉448346289

Antworte allen(1)
P粉662361740
P粉6623617402023-08-15 00:12:54 1 Etage

您观察到的行为实际上是预期的，并且不受NullComp函数中...others的存在或缺失的影响。需要注意的关键是，在提供的代码中没有使用或调用NullComp函数，因此它不会影响GoalComp函数的输出。

让我们来分析一下发生了什么：

在GoalComp函数中，您使用解构来提取props中的id、ticket和request属性。其余的属性（如果有）使用扩展运算符...props收集到props对象中。

当您在App组件中渲染GoalComp组件时，您传递了以下props：

  • className="mt-10"
  • id="1"
  • ticket="IT-ABCD"
  • request="Peace and Love"

在这种情况下，当这些props传递给GoalComp时，id、ticket和request属性被提取出来，剩下的className属性被收集到props对象中。这就是为什么当您console.log(props)时，您会看到一个只有一个属性的对象：{ className: "mt-10" }。

NullComp函数中...others的存在与否在这个上下文中是无关紧要的。由于没有使用NullComp，它是否有...others都不会影响GoalComp函数的输出。

总之，代码按预期工作。在任何情况下，NullComp函数都不会影响GoalComp函数的输出。

希望对您有所帮助！

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！