[解決済み] React JSXにおける...restの意味とは？

質問

React Router Dom v4 のサンプルを見てみましょう。 https://reacttraining.com/react-router/web/example/auth-workflow なるほど プライベートルート コンポーネントは、以下のようにレストプロップを再構築します。

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

を確かめたい。 { component: Component, ...rest } を意味します。

から props を使用して、Component プロップを取得し、他のすべてのプロップはあなたに与えられている、そして名前を変更します。 props から rest に渡されるプロップの命名問題を回避できるようになります。 render 機能

そうだろうか？

どのように解決するのですか？

申し訳ありませんが、私の最初の回答は（できればまだ有用な／追加の文脈を提供したいところですが）あなたの質問に答えていないことに気づきました。もう一度お願いします。

という質問ですね。

確かめたいのは { component: Component, ...rest } を意味します。

から props を取得します。 Component プロップ、そして他のすべての props 与えられた という名前に変更し props を rest での命名問題を回避できるようになります。 props に渡されるRoute render 機能

あなたの解釈はちょっと違う。しかし、あなたの考えからすると、少なくともここで起こっていることが、ある種の オブジェクトの再構築 (さらに明確にするために、2番目の回答とそこでのコメントを参照してください)。

正確な解説をするために、「1」の部分を分解してみましょう。 { component: Component, ...rest } 式は、2つの別々の操作に分かれています。

1. 操作1: を検索します。 component プロパティが定義されています。 props ( ノート : 小文字 c コンポーネント) を作成し、それを新しい場所に割り当てます。 Component ( ノート 資本金 C omponent)です。
2. 操作 2． 次に、すべての 残り で定義されたプロパティは props という引数の中に集められます。 rest .

重要な点は、名前を変更していないことです。 props から rest . (との命名問題を避けようとすることとも関係ありません）。 props に渡されるRoute render 関数を使用します)。

rest === props;
// => false

単に引いているだけ その他 に定義されているプロパティのうち、1つだけを指定することができます (そのため、この引数はそのように名付けられています)。 props という新しい引数に変換します。 rest .

---

使用例

以下はその例です。以下のように定義されたオブジェクト `myObj` があるとする。

const myObj = {
  name: 'John Doe',
  age: 35,
  sex: 'M',
  dob: new Date(1990, 1, 1)
};

この例では、次のように考えてもよいでしょう。 props は、同じ構造( すなわち プロパティと値)で示されるように myObj . では、次のような課題を書いてみましょう。

const { name: Username, ...rest } = myObj

上の文は、両方の意味になります。 宣言 と 代入 の2つの変数(定数かな)。この文は、次のように考えることができます。

プロパティを取得する name に定義されている myObj を作成し、その値を新しい という変数があります。 Username . 次に、他のすべてのプロパティが に定義されている myObj ( すなわち , age , sex と dob を収集します。 という変数に割り当てられた新しいオブジェクトになります。 rest .

ロギング Username と rest から console が確認できると思います。次のようなものがあります。

console.log(Username);
// => John Doe

console.log(rest);
// => { age: 35, sex: 'M', dob: Mon Jan 01 1990 00:00:00 GMT-0800 (PST) }

---

サイドノート

と疑問に思うかもしれません。

をわざわざ引くのはなぜ？ component プロパティ という名前に変更するだけで Component を大文字の"C"で書くと？

ええ、かなり些細なことのようです。そして、これはReactの標準的なプラクティスですが、すべての Facebookのドキュメント のように書かれています。つまり、JSXでレンダリングされたカスタムコンポーネントを大文字にすることは、それ自体が習慣というよりも、必要なことなのです。React、いや、もっと正しくは JSXは大文字と小文字を区別する . 最初の文字が大文字でない状態で挿入されたカスタムコンポーネントは、DOMにレンダリングされません。これは、Reactがカスタムコンポーネントを識別するために定義した方法に過ぎません。したがって、もしこの例でさらに component プロパティから引き抜かれた props から Component は、その <component {...props} /> 式は正しくレンダリングされない。