Question

一段反应原生代码：

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

此代码返回一个组件对象

但我不明白这段代码---＆gt; {... route.params}

问题：

'...'是什么意思？
你能告诉我“{... route.params}”是什么意思吗？

Answer 1

＆＃39; ...＆＃39;被称为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

为了扩展上述内容，在原始帖子的上下文中，spread运算符实际上是遍历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} />

另一方＆＃34;方＆＃34;这是解构分配（使用无状态反应组件的例子）

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

请参阅Destructuring

Answer 3

要添加到上述给出的答案中，...或散布运算符对本机响应不是什么特别的事情。这是es6中的功能。 ES6代表ecma脚本，是javascript遵循的标准。这意味着您可以在react / react-native之外创建一个.js文件，并在节点env中运行它，并且散布运算符仍然可以工作。

Answer 4

好吧，很长一段时间我对此感到困惑。因此，我会尽力向您解释：

假设您有一个像下面这样的反应类：

FormControl

在这里，您可以看到{this.props.variable}太多了。当我们将上面的此类导入到另一个类别（例如下面）中时，这些用于创建动态值：

@Input() value

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

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;

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

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;

因此，您可以在send return语句中看到，我已经分别指定了所有props变量并为其分配了值，而在第一个return语句中，我已经传递了所有pf一次从SingleService对象中获得道具，这些道具将传递所有键值对。

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

问题：

4 个答案: