ホームページ >ウェブフロントエンド >フロントエンドQ&A >3 つの点は、react で何を表していますか?

3 つの点は、react で何を表していますか?

藏色散人
藏色散人オリジナル
2022-12-27 16:37:253434ブラウズ

React の 3 つのドットは「拡張演算子」を表します。React では、拡張演算子は通常、「var props = {};props.foo = x; props」などの属性のバッチ割り当てに使用されます。 bar = y;var コンポーネント = f403071e937cfb381b283c3650f8da72;"。

3 つの点は、react で何を表していますか?

#このチュートリアルの動作環境: Windows 10 システム、React バージョン 18.0.0、Dell G3 コンピューター。

react 3 つのドットは何を表しますか?

は「拡張演算子」を表します。

... 演算子 (スプレッド演算子とも呼ばれる) は、ES6 配列ですでにサポートされています。これにより、apply を経由せずに、配列または配列に似た関数を関数のパラメーターとして直接渡すことができます。

var people=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数人一,人二和人三
function sayHello(people1,people2,people3){
    console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数
sayHello(...people);//输出:Hello Wayou,John,Sherlock 
//而在以前,如果需要传递数组当参数,我们需要使用函数的apply方法
sayHello.apply(null,people);//输出:Hello Wayou,John,Sherlock

React では、属性の一括割り当てには拡張演算子が一般的に使用されます。 JSX では、... 演算子を使用して、オブジェクトのキーと値のペアを ReactElement の props 属性とマージできます。

var props = {};
  props.foo = x;
  props.bar = y;
  var component = <Component {...props} />;
  
//等价于
var props = {};
  props.foo = x;
  props.bar = y;
  var component = <Component foo={x} bar={y} />;

これは、通常の XML 属性と混合することもできます。同じ名前の属性が必要で、後者は前者をオーバーライドします:

var props = { foo: &#39;default&#39; };
var component = <Component {...props} foo={&#39;override&#39;} />;
console.log(component.props.foo); // &#39;override&#39;

推奨される学習: "

react videoチュートリアル"

以上が3 つの点は、react で何を表していますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。