搜尋

首頁  >  問答  >  主體

已停用的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<...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>
P粉448346289P粉448346289553 天前639

全部回覆(1)我來回復

  • P粉662361740

    P粉6623617402023-08-15 00:12:54

    您觀察到的行為實際上是預期的，並且不受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函數的輸出。

    希望對您有幫助！

    回覆
    0
  • 取消回覆