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

Question

一段反应原生代码:

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

另一个“方面”是销毁分配（例如，使用无状态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>
}

请参阅解构