Les fonctions JS désactivées interfèrent avec le fonctionnement normal du code HTML/JS/Babel
P粉448346289
2023-08-14 15:14:58
<p>Dans le code ci-dessous, je m'attendais (console enregistrée) à ce que l'objet <code>props</code> contienne uniquement le membre : <code>className</code> ; code>{ nom de classe, identifiant, ticket, demande }</code>. Cependant, si je supprime le paramètre <code>...others</code> de <strong>Unused Function</strong><code>NullComp</code>, alors l'objet <code>props< Le seul Le membre de ;/code> est : <code>className</code>, ce qui correspond exactement à ce à quoi je m'attendais à l'origine. </p>
<p>Vous pouvez l'essayer vous-même en exécutant le code ci-dessous : </p>
<p>Utiliser : <code>...autres</code> : </p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<tête>
<meta charset="UTF-8" />
<titre>Test</titre>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
≪/tête>
<corps>
<div id="root"></div>
<script type="text/babel">
fonction ObjectifComp({
IDENTIFIANT,
billet,
demande,
...accessoires
}) {
console.log(props);
return <div>Independent Retriever</div>;
}
</script>
<script type="text/babel">
function NullComp({ timeRanges, ...autres }) {
renvoie null ;
}
</script>
<script type="text/babel">
const { useState, useEffect } = Réagir ;
const App = () => {
retour (
<Comp.Objectif
Nom de classe = "mt-10"
identifiant="1"
ticket="IT-ABCD"
request="Paix et Amour"
/>
);
} ;
ReactDOM.render(<App />, document.querySelector("#root"));
</script>
</corps>
</html></pre>
<p><br /></p>
<p>不使用：<code>...autres</code>：</p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<tête>
<meta charset="UTF-8" />
<titre>Test</titre>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
≪/tête>
<corps>
<div id="root"></div>
<script type="text/babel">
fonction ObjectifComp({
identifiant,
billet,
demande,
...accessoires
}) {
console.log(props);
return <div>Independent Retriever</div>;
}
</script>
<script type="text/babel">
fonction NullComp({ timeRanges }) {
renvoie null ;
}
</script>
<script type="text/babel">
const { useState, useEffect } = Réagir ;
const App = () => {
retour (
<Comp.Objectif
nom de classe = "mt-10"
identifiant="1"
ticket="IT-ABCD"
request="Paix et Amour"
/>
);
} ;
ReactDOM.render(<App />, document.querySelector("#root"));
</script>
</corps>
</html></pre>
<p><br /></p>
<p>我在这里漏掉了什么？</p>
<p>谢谢！</p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Le comportement que vous avez observé est réellement attendu et n'est pas affecté par le résultat de la fonction
NullComp函数中...others的存在或缺失的影响。需要注意的关键是，在提供的代码中没有使用或调用NullComp函数，因此它不会影响GoalComp.Décomposons ce qui s'est passé :
dans
GoalComp函数中，您使用解构来提取props中的id、ticket和request属性。其余的属性（如果有）使用扩展运算符...props收集到propsobjet.Lorsque vous êtes dans le composant
App组件中渲染GoalComp, vous passez les accessoires suivants :className="mt-10"id="1"ticket="IT-ABCD"request="Peace and Love"Dans ce cas, lorsque ces accessoires sont transmis à
GoalComp时，id、ticket和request属性被提取出来，剩下的className属性被收集到props对象中。这就是为什么当您console.log(props)时，您会看到一个只有一个属性的对象：{ className: "mt-10" }.NullComp函数中...others的存在与否在这个上下文中是无关紧要的。由于没有使用NullComp，它是否有...others都不会影响GoalCompLa sortie de la fonction.Quoi qu'il en soit, le code fonctionne comme prévu. Dans tous les cas, la sortie de la fonction
NullComp函数都不会影响GoalComp.J'espère que cela aide !