React 中的这三个点 (...) 有什么作用？

被称为 Spread 语法的三点 (...) 符号长期以来一直是 React 的一部分，当时它可以通过转译使用，尽管它已作为 ES2015 语法的一部分成为 JavaScript 的一部分。

Spread 语法用于将数组或对象解构为单独的变量，其中可能不知道数组中元素的确切数量，或者当我们希望将一个属性或一组属性与整个对象分开时。

可以使用扩展语法执行以下操作：

1. 传递属性：一个对象可以直接传递给一个组件，而不用单独传递对象中的每个数据值。

values:{
    height: 20,
    width: 10
}



// This same as the following:

2.继承一个对象：当创建一个继承另一个对象的新对象时，我们可以使用Spread语法来继承父对象。

object1:{
    a: 10,
    b: 20
};

object2:{
    ...object1,
    c: 14
};

3.连接数组：我们还可以使用Spread语法连接数组，如下所示。

var first =[1, 2, 3];
var second = [2, 3, 4, 5];
var third = [...first, ...second];

4. 解构数组：也可以使用扩展语法将数组解构为单独的组件。

var original = [1,2,3,4,5,6,7];
var [first, ...remaining] = original;

// Therefore the following will be the values of first and remaining.
first = [1]  
remaining = [2,3,4,5,6,7]

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app spread-syntax-demo
```
第 2 步：创建项目文件夹后，使用以下命令移动到该文件夹：
```
cd spread-syntax-demo
```

项目结构：它将如下所示。

示例：在 App.js 文件中，我们将创建一个对象，从中创建一个子对象，然后将其作为属性传递给组件。

App.js

import React from 'react';
import Image from './Image.jsx';
  
function App(props) {
  const originalImage = { src:
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png",
    alt:"This is a random image"
  };
  
  const formattedImage = {
    ...originalImage,
    height:300,
    width: 300
  }
  return (
    
      
    
  );
}
  
export default App;

Image.jsx

import React from 'react';
  
function Image(props) {
    return (
        
            
        
    );
}
  
export default Image;

在 Image.jsx 中，我们使用扩展语法将 props 传递给 HTML img 标签。

图片.jsx

import React from 'react';
  
function Image(props) {
    return (
        
            
        
    );
}
  
export default Image;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：