<p>아래 코드에서 <code>props</code> 멤버에는 <code>className</code> 멤버만 포함되어 있다고 예상했습니다(콘솔 로그). ; 코드>{ 클래스이름, ID, 티켓, 요청 }. 그러나 <strong>Unused Function</strong><code>NullComp</code>에서 <code>...others</code> 매개변수를 제거하면 <code>props< ;/code>의 멤버는 <code>className</code>입니다. 이는 제가 원래 기대했던 것과 정확히 같습니다. </p>
<p>아래 코드를 실행하여 직접 시도해 볼 수 있습니다. </p>
<p>사용: <code>...기타</code>: </p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<머리>
<meta charset="UTF-8" />
<title>테스트</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>
</머리>
<본문>
<div id="root"></div>
<스크립트 유형="텍스트/바벨">
함수 GoalComp({
ID,
티켓,
요구,
...소품
}) {
console.log(props);
독립 검색기
반환;;
}
</스크립트>
<스크립트 유형="텍스트/바벨">
function NullComp({ timeRanges, ...others }) {
null을 반환;
}
</스크립트>
<스크립트 유형="텍스트/바벨">
const { useState, useEffect } = 반응;
const 앱 = () => {
반품 (
<골컴
클래스이름="mt-10"
아이디="1"
티켓="IT-ABCD"
request="평화와 사랑"
/>
);
};
ReactDOM.render(<App />, document.querySelector("#root"));
</스크립트>
</body>
</html></pre>
<p><br /></p>
<p>불체사용：<code>...기타</code>：</p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<머리>
<meta charset="UTF-8" />
<title>테스트</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>
</머리>
<본문>
<div id="root"></div>
<스크립트 유형="텍스트/바벨">
함수 GoalComp({
ID,
티켓,
요구,
...소품
}) {
console.log(props);
return <div>독립 검색기</div>
}
</스크립트>
<스크립트 유형="텍스트/바벨">
함수 NullComp({ timeRanges }) {
null을 반환;
}
</스크립트>
<스크립트 유형="텍스트/바벨">
const { useState, useEffect } = 반응;
const 앱 = () => {
반품 (
<골컴
클래스이름="mt-10"
아이디="1"
티켓="IT-ABCD"
request="평화와 사랑"
/>
);
};
ReactDOM.render(<App />, document.querySelector("#root"));
</스크립트>
</body>
</html></pre>
<p><br /></p>
<p>내가 지금 여기 있나요?</p>
<p>谢谢!</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
관찰한 동작은 실제로 예상된 동작이며
NullComp函数中...others的存在或缺失的影响。需要注意的关键是，在提供的代码中没有使用或调用NullComp函数，因此它不会影响GoalComp함수의 출력에 영향을 받지 않습니다.무슨 일이 일어났는지 분석해 보겠습니다.
in
GoalComp函数中，您使用解构来提取props中的id、ticket和request属性。其余的属性（如果有）使用扩展运算符...props收集到props객체.App组件中渲染GoalComp구성 요소에 있을 때 다음 소품을 전달합니다.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함수의 출력입니다.도움이 되길 바랍니다!