什么是…在这个React(使用JSX)代码中做什么,它被称为什么?

<Modal {...this.props} title='Modal heading' animation={false}>

当前回答

<Modal {...{ title: "modal heading", animation: false, ...props} />

更加清晰。

其他回答

对于那些来自Python世界的人来说,JSX扩展属性相当于 解包参数列表(Python **-操作符)。

我知道这是一个JSX问题,但使用类比有时有助于更快地得到答案。

这些被称为价差。顾名思义,它的意思是把它的值放到那些数组或对象中。

如:

let a = [1, 2, 3];
let b = [...a, 4, 5, 6];
console.log(b);
> [1, 2, 3, 4, 5, 6]

这是ES6的一个特性,在React中也使用了这个特性。请看下面的例子:

function Sum(x, y, z) {
   return x + y + z;
}
console.log(Sum(1, 2, 3)); // 6

如果我们最多有三个参数,这种方式很好。但是,如果我们需要添加,例如,110个参数。我们是否应该定义它们并逐个添加它们?

当然,有一种更简单的方法,叫做扩散。 而不是传递所有这些参数,你写:

function (...numbers){} 

我们不知道有多少参数,但我们知道有很多。

基于ES6,我们可以重写上面的函数如下所示,并使用它们之间的扩展和映射,使其变得简单如一块蛋糕:

let Sum = (...numbers) => {
    return numbers.reduce((prev, current) => prev + current);
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9)); // 45

... 被称为扩展属性,顾名思义,它允许表达式展开。

var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]

在这种情况下(我要化简它)

// Just assume we have an object like this:
var person= {
    name: 'Alex',
    age: 35 
}

这样的:

<Modal {...person} title='Modal heading' animation={false} />

等于

<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />

简而言之,我们可以说这是一条简洁的捷径。

这三个点(…)被称为展开运算符,这在概念上类似于ES6数组展开运算符JSX 利用这些支持并开发标准,以便在JSX中提供更清晰的语法

对象初始化器中的展开属性复制自己的枚举对象 属性从提供的对象转移到新创建的对象。 设n = {x, y,…z}; n;// {x: 1, y: 2, a: 3, b: 4}

引用:

传播特性 JSX深入