search

Home  >  Q&A  >  body text

Disabled JS functions interfere with the normal operation of HTML/JS/Babel code

<p>In the code below, I expected (console logged) that the object <code>props</code> only contained the member: <code>className</code>, but it did contain the member: < code>{ className, id, ticket, request }</code>. However, if I remove the parameter <code>...others</code> from <strong>Unused Function</strong><code>NullComp</code>, then the object <code>props< The only member of ;/code> is: <code>className</code>, which is exactly what I originally expected. </p> <p>You can try it yourself by running the code below: </p> <p>Use: <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>
P粉448346289P粉448346289469 days ago599

reply all(1)I'll reply

  • P粉662361740

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

    The behavior you observe is actually expected and is not affected by the presence or absence of ...others in the NullComp function. The key thing to note is that the NullComp function is not used or called in the provided code, so it does not affect the output of the GoalComp function.

    Let’s analyze what happened:

    In the GoalComp function, you use destructuring to extract the id, ticket, and request properties in props. The remaining properties (if any) are collected into a props object using the spread operator ...props.

    When you render the GoalComp component in the App component, you pass the following props:

    • className="mt-10"
    • id="1"
    • ticket="IT-ABCD"
    • request="Peace and Love"

    In this case, when these props are passed to GoalComp, the id, ticket and request properties are extracted , the remaining className properties are collected into the props object. That's why when you console.log(props) you see an object with only one property: { className: "mt-10" }.

    The presence or absence of

    ...others in the NullComp function is irrelevant in this context. Since NullComp is not used, whether it has ...others will not affect the output of the GoalComp function.

    In summary, the code works as expected. Under no circumstances will the NullComp function affect the output of the GoalComp function.

    Hope this helps!

    reply
    0
  • Cancelreply