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}”是什么意思嗎？

Answer 1

'...' 被稱為Spread 語法。

展開語法允許在需要多個參數（用於函數調用）或多個元素（用於數組文字）或多個變量（用於解構賦值）的地方擴展表達式。

示例：

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

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

如果您想了解更多關於傳播運算符的信息：

https://rainsoft.io/how-three-dots-changed-javascript/

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

Answer 2

為了擴展上述內容，在原始帖子的上下文中，擴展運算符基本上傳遞了 route.params 中的所有參數

例如，如果 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} />

另一個“方面”是解構賦值（使用無狀態反應組件的示例）

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>
}

見解構

Answer 3

好吧，我對此困惑了很長一段時間。 所以，我會盡力為你解釋：

假設你有一個像下面這樣的反應類：

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} />);

所以，你可以在 send return 語句中看到，我已經單獨指定了所有的 props 變量並為它們分配了值，而在第一個 return 語句中，我已經一次性從 SingleService 對象中傳遞了所有的 props ，這將傳遞所有 od 鍵值對。

Answer 4

要添加到上述給出的答案中， ...或展開運算符並不是本機反應的特殊內容。 這是 es6 的一個特性。 ES6 代表 ecma 腳本，是 javascript 遵循的標准。 這意味着您可以在 react/react-native 之外創建一個.js文件並在節點環境中運行它，並且擴展運算符仍然可以工作。