Disabled JS functions interfere with the normal operation of HTML/JS/Babel code
P粉448346289
2023-08-14 15:14:58
<p>In the code below, I expected (console logged) that the object <code>props</code> only contained the member: <code>className</code>, but it did contain the member: < code>{ className, id, ticket, request }</code>. However, if I remove the parameter <code>...others</code> from <strong>Unused Function</strong><code>NullComp</code>, then the object <code>props< The only member of ;/code> is: <code>className</code>, which is exactly what I originally expected. </p>
<p>You can try it yourself by running the code below: </p>
<p>Use: <code>...others</code>: </p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<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>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function GoalComp({
ID,
ticket,
request,
...props
}) {
console.log(props);
return <div>Independent Retriever</div>;
}
</script>
<script type="text/babel">
function NullComp({ timeRanges, ...others }) {
return null;
}
</script>
<script type="text/babel">
const { useState, useEffect } = React;
const App = () => {
return (
<GoalComp
className="mt-10"
id="1"
ticket="IT-ABCD"
request="Peace and Love"
/>
);
};
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>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<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>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function GoalComp({
id,
ticket,
request,
...props
}) {
console.log(props);
return <div>Independent Retriever</div>;
}
</script>
<script type="text/babel">
function NullComp({ timeRanges }) {
return null;
}
</script>
<script type="text/babel">
const { useState, useEffect } = React;
const App = () => {
return (
<GoalComp
className="mt-10"
id="1"
ticket="IT-ABCD"
request="Peace and Love"
/>
);
};
ReactDOM.render(<App />, document.querySelector("#root"));
</script>
</body>
</html></pre>
<p><br /></p>
<p>我在这里漏掉了什么？</p>
<p>谢谢！</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The behavior you observe is actually expected and is not affected by the presence or absence of
...othersin theNullCompfunction. The key thing to note is that theNullCompfunction is not used or called in the provided code, so it does not affect the output of theGoalCompfunction.Let’s analyze what happened:
In the
GoalCompfunction, you use destructuring to extract theid,ticket, andrequestproperties in props. The remaining properties (if any) are collected into apropsobject using the spread operator...props.When you render the
GoalCompcomponent in theAppcomponent, you pass the following props:className="mt-10"id="1"ticket="IT-ABCD"request="Peace and Love"In this case, when these props are passed to
The presence or absence ofGoalComp, theid,ticketandrequestproperties are extracted , the remainingclassNameproperties are collected into thepropsobject. That's why when youconsole.log(props)you see an object with only one property:{ className: "mt-10" }....others
in theNullCompfunction is irrelevant in this context. SinceNullCompis not used, whether it has...otherswill not affect the output of theGoalCompfunction.In summary, the code works as expected. Under no circumstances will the
NullCompfunction affect the output of theGoalCompfunction.Hope this helps!