简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
已停用的JS函數對HTML/JS/Babel程式碼的正常運作產生了乾擾
P粉448346289
P粉448346289 2023-08-14 15:14:58
0
1
580
<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粉448346289
P粉448346289

全部回覆(1)
P粉662361740
P粉6623617402023-08-15 00:12:54 1樓

您觀察到的行為實際上是預期的，並且不受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
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！