React-Native中的'...'是什么意思？

Question

一段react-native代码:

enderScene(route, navigator) {
   let Component = route.component;
   return (
      <Component {...route.params} navigator={navigator}></Component>
   );
}

这段代码返回一个组件对象，

但我不理解这段代码 ---> {...route.params}

问题：

1. '...'的意思是什么？
2. 你能告诉我" {...route.params}"是什么意思吗？

- user5465320

---

https://dev59.com/w10Z5IYBdhLWcg3wzC5W - vinayr

这个回答解决了你的问题吗？React中的这三个点是做什么用的？ - Henke

Answer 1

'...'被称为展开语法。

展开语法允许在需要多个参数（用于函数调用），多个元素（用于数组字面量）或多个变量（用于解构赋值）的位置上展开一个表达式。

例如：

var car = ["door", "motor", "wheels"];
var truck = [...car, "something", "biggerthancar"];

// truck  = ["door", "motor", "wheels", "something", "biggerthancar"]

如果您想了解更多关于扩展运算符的内容：

https://dmitripavlutin.com/how-three-dots-changed-javascript/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

- Nicolas Menettrier

---

第一个链接已经失效。 - Arun Prasad E S

@ArunPrasadES 链接已修复。 - Dmitri Pavlutin

Answer 2

为了进一步阐述上面的内容，就原始帖子的背景而言，展开运算符本质上是通过路由参数中的所有参数进行传递。

例如，如果route.params是该对象：

{key: 'my-route', title: 'My Route Title'}

然后

<Component {...route.params} navigator={navigator} />

可以重写为

<Component key={route.params.key} title={route.params.title}  navigator={navigator} />

另一方面，这涉及到解构赋值（以无状态的React组件为例）。

const Component = (props) => {
    // this is simply referencing the property by the object key
    let myKey = props.key
    // this is using destructuring and results in the variables key, title and navigator which are from props.key, props.title and props.navigator
    let { key, title, navigator } = props

    return <Text>{title}</Text>
}

您也可以在函数声明中进行这样的操作，就像这样可以实现相同的效果

const Component = ({key, title, navigator}) => {
    // now you have variables key, title and navigator 
    return <Text>{title}</Text>
}

请参阅解构

- Sam Parmenter

Answer 3

好的，我曾经对此感到困惑了很长一段时间。因此，我将尽力向您解释：

假设您有一个如下所示的React类：

import React, {Component} from 'react';
import { Link } from 'react-router-dom';



class SingleService extends Component{

    render(){
        return(
            <div class="col-md-4">
                <span class="fa-stack fa-4x">
                <i class="fas fa-circle fa-stack-2x text-primary"></i>
                <i class={`fas ${this.props.icon} fa-stack-1x fa-inverse`}></i>
                </span>
        <h4 class="service-heading">{this.props.title}</h4>
        <p class="text-muted">{this.props.description}</p>
            </div>
        );
    }

}
export default SingleService;

在这里，您可以看到有许多{this.props.variable}。

它们用于在我们将上述类导入另一个类时创建动态值，如下所示：

import React, {Component} from 'react';
import { Link } from 'react-router-dom';

import SingleService from './SingleService';
// declaring a constant array to hold all of our services props.
// The following array is made up of the objects.

const services = [
    {
        title:'E-commerce',
        description:'Description text on E-commerce',
        icon: 'fa-shopping-cart'
    }
];
class Services extends Component{
    render(){
        return(
            <div>
  <section class="page-section" id="services">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2 class="section-heading text-uppercase">Services</h2>
          <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
        </div>
      </div>
      <div class="row text-center">
          {/* it's looping through an object, that's why we've used key value pair. */}
          { /* 
            to write js inside JSX,  we use curly braces 
            here we're using array.map() function.
          */}
            {services.map((service, index) => {
              // returning our component with props.
              // return (<SingleService title={service.title} description={service.description} icon={service.icon} />);
              // or, we can write the following
              return (<SingleService {...service}/>);
            })}
      </div>
    </div>
  </section>
            </div>
        );
    }
}
export default Services;

现在，这里我使用了著名的

return (<SingleService {...SingleService}/>);

但是有一件非常重要的事情，我可以通过编写以下行来避免使用它：

return (<SingleService title={service.title} description={service.description} icon={service.icon} />);

因此，您可以看到在发送返回语句中，我单独指定了所有的props变量并为其分配了值，而在第一个返回语句中，我一次性从SingleService对象中传递了所有的props，这将传递所有的键值对。

- Subhasish Nath

Answer 4

除了上面给出的答案，...或展开运算符并不是React Native特有的。它是ES6中的一个特性。ES6代表ecma脚本，是JavaScript遵循的标准。这意味着你可以在React / React Native之外创建一个.js文件，并在节点环境中运行它，展开运算符仍然有效。

- Yash Kalwani