Reactで違うコンポーネントをmapでレンダリングする方法

開発の人気オンラインコース ウェブ開発の人気オンラインコース

この記事は約 2 分で読めます。

みなさんこんにちは!!ひろしです!!!!

ひっさびさのブログ更新!MacbookAirを購入したので、キーボードがすごく打ちやすくカタカタしたくてブログを書こうと思いました!!

とはいってもブログの議題がないと記事が書けないので、今回は日頃触っているReactから違ったコンポーネントをmapで一気にレンダリングする方法について書いていきいと思います!!

同じようなコンポーネントであれば、そのままmapで表示することができますが、例えばAコンポーネントとBコンポーネントをランダムに一つの配列に入れてmapするときってどうするんだろうか??と思いません??

答えはこんな感じにできれば別のコンポーネントを合わせてmapすることができます!

const HogeComponent = () => {
  const AComponents = useMemo((): React.ReactNode[] => {
    return ['a', 'b', 'c'].map(v => <p>{v}</p>);
  }, [])

  const BComponents = useMemo((): React.ReactNode[] => {
    return ['1', '2', '3'].map(v => <p>{v}</p>);
  }, [])

  const renderComponents = useMemo((): React.ReactNode[] => {
    return [...AComponents, ...BComponents];
  }, [AComponents, BComponents])

  return (
  <div>
    {renderComponents.map(child => {
      return (
      <div>
        {child}
      </div>)
    })}
  </div>
  )
}

というか日頃こういうことをしたいケースが発生するのか?という話ですが、、

エンジニアならUdemyでしょ!!

知ってるけどまだ使ったことないって人は是非

管理人はこれでフリーランスになり現在は月単価110万円 + 副業という形で稼ぐことができました。

開発の人気オンラインコース ウェブ開発の人気オンラインコース

関連記事

特集記事

コメント

この記事へのコメントはありません。

CAPTCHA


TOP