<p>以下のコードでは、オブジェクト <code>props</code> にメンバー: <code>className</code> のみが含まれると (コンソールにログに記録され) 予想していましたが、メンバー: < が含まれていました。 ; コード>{クラス名、ID、チケット、リクエスト}</コード>。ただし、<strong>Unused Function</strong>gt;<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>
</head>
<本体>
<div id="ルート"></div>
<script type="text/babel">
関数ゴールコンプ({
ID、
チケット、
リクエスト、
...小道具
}) {
console.log(props);
return
Independent Retriever
;;
}
</スクリプト>
<script type="text/babel">
function NullComp({ timeRanges, ...others }) {
null を返します。
}
</スクリプト>
<script type="text/babel">
const { useState, useEffect } = 反応します。
const App = () => {
戻る （
<ゴールコンプ
クラス名 = "mt-10"
id="1"
チケット="IT-ABCD"
request="平和と愛"
/>
);
};
ReactDOM.render(<App />, document.querySelector("#root"));
</スクリプト>
</ボディ>
</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>
</head>
<本体>
<div id="ルート"></div>
<script type="text/babel">
関数ゴールコンプ({
ID、
チケット、
リクエスト、
...小道具
}) {
console.log(props);
return
Independent Retriever
;
}
</スクリプト>
<script type="text/babel">
関数 NullComp({ timeRanges }) {
null を返します。
}
</スクリプト>
<script type="text/babel">
const { useState, useEffect } = 反応します。
const App = () => {
戻る （
<ゴールコンプ
クラス名 = "mt-10"
id="1"
チケット="IT-ABCD"
request="平和と愛"
/>
);
};
ReactDOM.render(<App />, document.querySelector("#root"));
</スクリプト>
</ボディ>
</html></pre>
<p><br /></p>
<p>私はここに漏掉了何ですか?</p>
<p>谢谢！</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
観察された動作は実際には予期されたものであり、
NullComp関数内の...othersの有無には影響されません。注意すべき重要な点は、提供されたコードではNullComp関数が使用または呼び出されないため、GoalComp関数の出力には影響しないことです。何が起こったのか分析しましょう:
#GoalComp
関数では、構造化を使用して、props 内のid、ticket、およびrequestプロパティを抽出します。残りのプロパティ (存在する場合) は、スプレッド演算子...propsを使用してpropsオブジェクトに収集されます。GoalComp
コンポーネントをAppコンポーネントでレンダリングするときは、次のプロパティを渡します:- クラス名="mt-10"
- id="1"
- チケット="IT-ABCD"
- request="平和と愛"
この場合、これらのプロパティがGoalComp
に渡されると、id、ticket、およびrequestプロパティが抽出されます。残りのclassNameプロパティはpropsオブジェクトに収集されます。そのため、console.log(props)を実行すると、プロパティ{ className: "mt-10" }を 1 つだけ持つオブジェクトが表示されます。NullComp
要約すると、コードは期待どおりに機能します。いかなる状況でも、関数内の...othersの有無は、このコンテキストでは関係ありません。NullCompは使用されないため、...othersの有無はGoalComp関数の出力に影響しません。NullComp
関数はGoalComp関数の出力に影響を与えません。＃＃＃お役に立てれば！