Reactjs 中展开运算符(...) 的含义是什么？

三点语法 (...) 是 ES6 的一部分，而不是 React 本身，它被两个运算符使用，即Spread和Rest运算符。 Spread运算符允许您将对象、字符串或数组之类的可迭代对象扩展为其元素，而 Rest运算符通过将一组元素缩减为一个数组来执行相反的操作。

当您想要制作现有数组的精确副本时，展开运算符非常有用，您可以使用展开运算符快速完成此操作。

创建反应应用程序：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app foldername

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

  cd foldername

例子：

• 应用程序.js：

  Javascript

  import React, { Component } from 'react';
    
  // Details is a component in same folder
  import Details from './Details'; 
  class App extends React.Component {
    
    render() {
      var person = {
        name: 'User',
        age: 22
      };
    
      return (
        
  
          {/* Details component which accepts props */}
          
  
        
      );
    }
  }
    
  export default App;

  
  
  

• Details.js（详细信息组件）：

  Javascript

  import React, { Component } from 'react';
    
  class Details extends React.Component {
    render() {
      // To extract values in variables sent by parent component
      const { name, age } = { ...this.props };
      return (
        
  
          
  Person Details: 
          
  
            
  name={this.props.title} {name}
            
  age={age}
          
        
      );
    }
  }
    
  export default Details;
  

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

npm start