Zenn
AIQ Tech Blog (有志)Publicationへの投稿
💎

ReactでJSX.ElementなどのReact ComponentをPropsとして渡す方法

まさぴょん
2023/10/08に公開
Next.js
React
TypeScript
frontend
component
tech

こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！
今回は、ReactでJSX.ElementなどのReact ComponentをPropsとして渡す方法について解説します。

ReactでJSX.ElementなどのReact ComponentをPropsとして渡す方法

わかりやすいように、ReactでJSX.ElementなどのReact ComponentをPropsとして渡す方法については、最低限のCodeで説明したいと思います。

先にポイントだけ説明すると、次のとおりです。

この2点が、今回のポイントなので、その点に注意して、SampleCodeを見てみてください。

以前に、SVG画像をReact Component化して活用する方法をご紹介しましたが、
今回は、このようなSVG IconのReact ComponentをPropsとして渡したいケースで考えてみます。

https://zenn.dev/aiq_dev/articles/c6191746560398

React Componentを受け取るChild Component

まずは、JSX.ElementなどのReact Componentを受け取るChild Componentを作ります。

Child.tsx
/** Propsの型定義 */
interface PropsType {
  /** SVG_Icon は JSX.Elemtn として Component 定義したものを想定しています */
  svgIcon: JSX.Element;
}

const Child = (props: PropsType) => {
  const { svgIcon } = props;

  return (
   <div>
    {svgIcon}
   </div>
  );
};

export default Child;

React Componentを渡すParent Component

続いて、JSX.ElementなどのReact Componentを渡すParent Componentを作ります。

Parent.tsx
import IconMsgButton from "./Child";
import ImageIconSvg from "../ui-elements/icons/ImageIconSvg";

<Child
  svgIcon={<ImageIconSvg />}
/>

このような、受け渡しを設定することで、JSX.ElementなどのReact ComponentをPropsとして渡すことができます。

まとめ

今回は、ReactでJSX.ElementなどのReact ComponentをPropsとして渡す方法について解説しました。

次回は、これを実際に活用したIconとMessageTextをカスタマイズできるButton Componentについて、ご紹介したいと思います。

個人で、Blogもやっています、よかったら見てみてください。

https://masanyon.com/

注意事項

この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。

求む、冒険者！

AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨

エンジニア視点での我が社のおすすめポイント

  1. フルリモート・フルフレックスの働きやすい環境！
    • 前の会社でアサインしてた現場は、フル出社だったので、ありがたすぎる。。。
    • もうフル出社には、戻れなくなります！
  2. 経験豊富なエンジニアの先輩方
    • 私は、3年目の駆け出しエンジニアなので、これが、かなりありがたいです！
  3. 自社開発とR&D(受託開発)を両方している会社なので、経験できる技術が多い。
    • 自社のProduct開発と、他社からの受託案件で、いろいろな技術を学ぶことができます。
  4. AI関連の最新の技術に触れられるチャンスが多い。
    • 自社で特許を持つほど、AI技術に強い会社で、プロファイリングを得意とした技術体系があります。
    • ChatGPTを自社アプリに搭載など、AIトレンドも、もちろん追っており、最新の技術に触れられるチャンスが多いです。
  5. たまに、札幌ラボ(東京から札幌) or 東京オフィス(札幌から東京)に出張で行ける！
    • 東京と、札幌に2拠点ある会社なので、会合などで集まる際に、出張で行けます。

採用技術 (一部抜粋)

  • FrontEnd: TypeScript, JavaScript, React.js, Vue.js, Next.js, Nuxt.js など
  • BackEnd: Node.js, Express,Python など
  • その他技術: Docker, AWS, Git, GitHub など

エントリー方法

  1. 私達と東京か札幌で一緒に働ける仲間を募集しています。
    詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。

Webエンジニア向け説明

https://www.wantedly.com/projects/1089410

データサイエンティスト向け説明

https://www.wantedly.com/projects/1089406

人事に直通(?)・ご紹介Plan(リファラル採用)

私経由で、ご紹介もできますので、興味のある方や気軽にどんな会社なのか知りたい方は、X(旧:Twitter)にて、DMを送ってくれても大丈夫です。
https://twitter.com/masanyon1212

AIQ Tech Blog (有志)
AIQ Tech Blog (有志)Publication

AIQ 株式会社 に所属するエンジニアが技術情報をお届けします。 ※ AIQ 株式会社 社員による個人の見解であり、所属する組織の公式見解ではありません。 Wantedly: wantedly.com/companies/aiqlab

Discussion