web-dev-qa-db-ja.com

React-Nativeの「...」はどういう意味ですか？

react-nativeコードの一部：

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

このコードはコンポーネントオブジェクトを返します、

しかし、私はこのコードを理解していません---> {... route.params}

質問：

  1. '...'とはどういう意味ですか？
  2. 「{... route.params}」の意味を教えてください。
iosreact-nativenavigator
9
user5465320

'...'は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

16
menett_a

上記を拡張するために、元の投稿のコンテキストでは、スプレッド演算子は基本的に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} />

これのもう1つの「側面」は、破壊的な割り当てです（ステートレス反応コンポーネントを使用した例）

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 を参照してください

9
Sam Parmenter

上記の答えに加えて、...またはspread演算子はネイティブに反応する特別なものではありません。これはes6の機能です。 ES6はecmascriptの略で、javascriptの標準です。これは、react/react-nativeの外部で.jsファイルを作成し、それをノードenvで実行しても、spread演算子が引き続き機能することを意味します。

0
Yash Kalwani