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

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

#このチュートリアルの動作環境: 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: 'default' };
var component = <Component {...props} foo={&#39;override&#39;} />;
console.log(component.props.foo); // &#39;override&#39;

推奨される学習: "

react videoチュートリアル"

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