已停用的JS函数对HTML/JS/Babel代码的正常运行产生了干扰
<p>在下面的代码中，我期望（控制台记录）的对象<code>props</code>只包含成员：<code>className</code>，但它包含了成员：<code>{ className, id, ticket, request }</code>。然而，如果我从<strong>未使用的函数</strong><code>NullComp</code>中删除参数<code>...others</code>，那么对象<code>props</code>的唯一成员就是：<code>className</code>，这正是我最初期望的。</p>
<p>您可以通过运行下面的代码来自己尝试：</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, ...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>
1
967
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
您观察到的行为实际上是预期的，并且不受
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函数的输出。希望对您有所帮助！