已停用的JS函数对HTML/JS/Babel代码的正常运行产生了干扰-PHP中文网问答

在下面的代码中，我期望（控制台记录）的对象props只包含成员：className，但它包含了成员：{ className, id, ticket, request }。然而，如果我从未使用的函数NullComp中删除参数...others，那么对象props的唯一成员就是：className，这正是我最初期望的。

您可以通过运行下面的代码来自己尝试：

使用：...others：

<!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>

不使用：...others：

<!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>

我在这里漏掉了什么？

谢谢！

全部回复(1)

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

添加回复