这是一个关于 reactjs 和 JSX 中三个点(...)的简单例子。
反应中的三点指定从反应组件层次中传递对象属性。 它还更新反应应用程序中的嵌套json对象。
三点(...)在javascript中也称为spread attribute 或spread syntax 。
它是作为ES6的一部分引入的。你可以查看我之前关于 "Spreadoperator "的教程。
三个点有什么作用？
它允许扩展对象的可枚举属性，这意味着数组表达式或字符串或对象属性是可枚举属性。
让我们看一个简单的例子，看看它是如何扩展可枚举属性的。
var data = ['3', '4','5'];
var numbers = ['1', ...data, '6', '7']; // ["1", "3", "4", "5", "6","7"]
在上面的例子中，数据包含了多个可枚举的属性。 为了将这些数字添加到另一个数组之间，展开运算符放置，结果是将多个属性复制到结果。
这有助于传递至少0个参数，即动态属性。
反应组件是如何使用三个点的？
var employee= {
name: 'Franc',
id: 1,
salary:5000
}
这些数据如何作为道具从父组件转移到子组件。
如果有一个更大的属性集来传递一个对象给react组件，那怎么办。
<Person name={employee.name} id={employee.id} salary={employee.salary}/>
这看起来不是一个干净的传递方式。
同样的，用spread operator syntax 来重写上面的内容。
<Employee {...employee}>
这是一种干净的从一个组件传递数据到另一个组件的方式。
反应钩子中的三个点的例子
这个传播操作符在react hooks中被用来更新状态对象。
React状态对象是用默认的对象属性初始化的，使用useState对象 useState对象返回初始状态和更新状态的函数。
在更新状态时，传播操作符用新值复制原始数据。它将只更新没有改变的属性。
const [employee, setEmployee] = useState({
id: '',
name: '',
salary: ''
});
setEmployees([
...employees,
{
name: "John",
id:"10",
salary:"5000"
}
]);
下面是一个完整的例子。
import React, { useState } from 'react';
function HookSpreadArray(props) {
const [employe, setEmploye] = useState([]);
const [name, setName] = useState("");
const saveEmploye = event => {
event.preventDefault();
setEmploye([
...employe,
{
name: name
}
]);
setName("");
};
return (
<div>
<>
<form onSubmit={saveEmploye}>
<label>Name
<input
name="name"
type="text"
value={name}
onChange={e => setName(e.target.value)}
/>
</label>
<button name="Save" value="Save">Save</button>
</form>
<ul>
{employe.map(emp => (
<li key={emp.empid}>{emp.name}</li>
))}
</ul>
</>
</div>
);
}
export default HookSpreadArray;
反应状态中的传播操作符
用于改变反应状态属性的传播操作符 让我们在构造函数中声明状态，如下所示。
this.state = { name: "Fran" }
可以使用带有对象参数的setState方法来更新状态。
第一种方式，用简单的语法
this.setState({name: "kiran"})
第二种，同样可以用传播操作符或三点式的语法实现
this.setState({ ...this.state, name: "kiran" })
)
正如你所看到的，将现有的状态与一个新的对象合并，将......传给这个对象，状态将做一个浅层的合并，变成一个新的状态。
这两种方法都很有帮助，而且做的也一样，但是当你在状态树中有一个嵌套对象时，第一种语法就很难了。
例如，嵌套对象在状态对象中被初始化了
state = {
id:1,
name:"John",
dept:{
name:"Sales"
}
}
你如何更新反应状态中的嵌套json对象？
例如，你想把dept.中的名字更新为新值，即dept:{name: "Support"}。
使用状态对象中的三个点，你可以轻松地更新
this.setState({ dept: {
...this.state.dept,
name: 'support'
}})
