Fungsi JS yang dilumpuhkan mengganggu operasi biasa kod HTML/JS/Babel
P粉448346289
2023-08-14 15:14:58
<p>Dalam kod di bawah, saya menjangkakan (konsol dilog) bahawa objek <kod>props</code> hanya mengandungi ahli: <code>className</code>, tetapi ia mengandungi ahli: < ; kod>{ className, id, tiket, permintaan }</code>. Walau bagaimanapun, jika saya mengalih keluar parameter <kod>...lain</kod> daripada <strong>Fungsi Tidak Digunakan</strong><kod>NullComp</kod>, maka objek <kod>props< Satu-satunya ahli ;/code> ialah: <code>className</code>, iaitu apa yang saya jangkakan pada asalnya. </p>
<p>Anda boleh mencubanya sendiri dengan menjalankan kod di bawah: </p>
<p>Gunakan: <kod>...lain</kod>: </p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<kepala>
<meta charset="UTF-8" />
<title>Ujian</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>
<badan>
<div id="root"></div>
<script type="text/babel">
fungsi GoalComp({
ID,
tiket,
permintaan,
... prop
}) {
console.log(props);
kembalikan <div>Independent Retriever</div>;
}
</skrip>
<script type="text/babel">
fungsi NullComp({ timeRanges, ...lain-lain }) {
kembali null;
}
</skrip>
<script type="text/babel">
const { useState, useEffect } = React;
const App = () => {
kembali (
<GoalComp
className="mt-10"
id="1"
tiket="IT-ABCD"
request="Peace and Love"
/>
);
};
ReactDOM.render(<App />, document.querySelector("#root"));
</skrip>
</badan>
</html></pre>
<p><br /></p>
<p>不使用：<kod>...lain-lain</kod>：</p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<kepala>
<meta charset="UTF-8" />
<title>Ujian</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>
<badan>
<div id="root"></div>
<script type="text/babel">
fungsi GoalComp({
ID,
tiket,
permintaan,
... prop
}) {
console.log(props);
kembalikan <div>Independent Retriever</div>;
}
</skrip>
<script type="text/babel">
fungsi NullComp({ TimeRanges }) {
kembali null;
}
</skrip>
<script type="text/babel">
const { useState, useEffect } = React;
const App = () => {
kembali (
<GoalComp
className="mt-10"
id="1"
tiket="IT-ABCD"
request="Peace and Love"
/>
);
};
ReactDOM.render(<App />, document.querySelector("#root"));
</skrip>
</badan>
</html></pre>
<p><br /></p>
<p>我在这里漏掉了什么？</p>
<p>谢谢！</p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Tingkah laku yang anda perhatikan sebenarnya dijangka dan tidak dipengaruhi oleh output fungsi
NullComp函数中...others的存在或缺失的影响。需要注意的关键是，在提供的代码中没有使用或调用NullComp函数，因此它不会影响GoalComp.Mari kita pecahkan apa yang berlaku:
dalam
GoalComp函数中，您使用解构来提取props中的id、ticket和request属性。其余的属性（如果有）使用扩展运算符...props收集到propsobjek.Apabila anda berada dalam komponen
App组件中渲染GoalComp, anda lulus prop berikut:className="mt-10"id="1"ticket="IT-ABCD"request="Peace and Love"Dalam kes ini, apabila prop ini diserahkan kepada
GoalComp时，id、ticket和request属性被提取出来，剩下的className属性被收集到props对象中。这就是为什么当您console.log(props)时，您会看到一个只有一个属性的对象：{ className: "mt-10" }.NullComp函数中...others的存在与否在这个上下文中是无关紧要的。由于没有使用NullComp，它是否有...others都不会影响GoalCompKeluaran fungsi.Apa pun, kod berfungsi seperti yang diharapkan. Walau apa pun, output fungsi
NullComp函数都不会影响GoalComp.Semoga ia membantu!