66926


例えば Component の extra という props を固定したコンポーネントを作るときに

[code]

    const HogeComponent = props => <Component {...props} extra='hoge' />
    
[/code]

と書けますが、以下のように省略して書く方法はありますか？

[code]

    const HogeComponent = Component.bind({ extra: 'hoge' })
    
[/code]


CC BY-SA 4.0
2020-01-30T02:52:59.917
62650
2020-05-23T15:36:42.087
2020-01-30T03:13:06.617
13554
question
javascript reactjs
React で prop 受け渡しの shorthand はありますか？


[High-Order Component](https://ja.reactjs.org/docs/higher-order-
components.html)(通称HoC)を利用する方法があります。書き方は独特ではありますが、デザインパターンの[Factory
Methodパターン](https://www.techscore.com/tech/DesignPattern/FactoryMethod.html/)とやっていることは変わりません。コンポーネントを作る関数を定義してあげればよいのです。

例えば、コメントを投稿するユーザー名を固定するコンポーネントを使いまわしたいとき、次のようのにかけます。

[code]

    import React from "react";
    
    const Comment = props => {
      return (
        <div>
          <p className="name">
            <strong>{props.name}</strong>
          </p>
          <p className="message">{props.message}</p>
        </div>
      );
    };
    
    const createComponent = init => props => <Comment {...{ ...init, ...props }} />;
    
    export default function App() {
      const HogeComponent = createComponent({ name: "hoge" }); // hogeで固定
      const FugaComponent = createComponent({ name: "fuga" }); // fugaで固定
      return (
        <>
          <HogeComponent message="hoge" />
          <FugaComponent message="fuga" />
          <HogeComponent message="hoge hoge" />
          <FugaComponent message="fuga fuga" />
        </>
      );
    }
    
[/code]

1つ効果的に利用な用途としては、初期化が高コストだが、それをよく使い回す場合です。例えばブログの記事をSingle Page
Applicationとして作成し、ページ遷移が発生するたびに、ページ全体を再生成するのは非効率です。そのため、記事の本文以外は初期化しておき、ページの遷移を行うときは記事の内容のみを変更するようにすれば、処理コスト的に効率的であることがわかるでしょう。


CC BY-SA 4.0
2020-05-23T15:36:42.087
66926
2020-05-23T15:36:42.087
7997
62650
answer