<p>在下面的程式碼中，我期望（控制台記錄）的物件<code>props</code>只包含成員：<code>className</code>，但它包含了成員：< code>{ className, id, ticket, request }</code>。然而，如果我從<strong>未使用的函數</strong><code>NullComp</code>中刪除參數<code>...others</code>，那麼物件<code>props<...others</code>，那麼物件<code>props<...others</code>，那麼物件<code>props<...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>;
}
</腳本>
<腳本類型=“text/babel”>
函數 NullComp({ timeRanges, ...others }) {
返回空值；
}
</腳本>
<腳本類型=“text/babel”>
const { useState, useEffect } = React;
const App = () =>; {
返回 （
<目標比較
類別名稱=“mt-10”
id=“1”
票證=“IT-ABCD”
請求=“和平與愛”
>>
）；
};
ReactDOM.render(
, document.querySelector("#root"));
</腳本>
</正文>
</html></pre>
<p><br />></p>
<p>不使用：<code>...其他</code>：</p>
<p><br />></p>
;
<頭>
<元字元集=“UTF-8”/>
<標題>測試
<腳本 src="https://unpkg.com/react/umd/react.product.min.js"></script>
<腳本 src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
;
</頭>
<正文>
<div id="root"></div>
<腳本類型=“text/babel”>
函數 GoalComp({
ID，
票，
要求，
...道具
}) {
控制台.log(道具);
return 獨立檢索器
;
}
</腳本>
<腳本類型=“text/babel”>
函數 NullComp({ timeRanges }) {
返回空值；
}
</腳本>
<腳本類型=“text/babel”>
const { useState, useEffect } = React;
const App = () =>; {
返回 （
<目標比較
類別名稱=“mt-10”
id=“1”
票證=“IT-ABCD”
請求=“和平與愛”
>>
）；
};
ReactDOM.render(, document.querySelector("#root"));
</腳本>
</正文>
</html></pre>
<p><br />></p>
<p>我在這裡漏掉了什麼？</p>
<p>謝謝！</p> 
您觀察到的行為實際上是預期的，並且不受
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函數的輸出。希望對您有幫助！