JSX get文字列でコンポーネントを取得

Question

これは説明するのがかなり複雑です。

次のように私は、コンポーネントライブラリからIconsのカップルを取得しています：

import { Icons } from私成分-ライブラリ '; `

レッツは、私は3つのアイコンがそこにIconPlus、IconMinusと呼ばれる持っていると言うと、 IconEquals。

次のように私は簡単に説明小道具と一緒にIconEqualsを表示することができます。

const IconContainer = ({ description) => (
    <div> 
     {description} 
     <Icons.IconEquals /> 
    </div> 
) 

これはうまく動作します。今私は別の小道具iconをこのコンテナに渡して、対応するアイコンを表示するテンプレートを実装しようとしています。

例： iconがIconPlus

である場合、それは次のようにレンダリングする必要があります。

<div> 
    {description} 
    <Icons.IconEquals /> 
</div> 

どのように私はそれを行うために私JSXを実装していますか？

これは私が持っているものは基本的である：

import { Icons } from 'my-component-library' 

const IconContainer = ({ description, icon }) => (
    <div> 
     {description} 
     <Icons.{icon} /> // <---- Obviously that doesn't work 
     // ^^^^ But I need something like this 
    </div> 
); 

はこれを行うことが可能ですか？

Answer 1

あなたはこのように使用することができます：あなたは確か

<Icons[icon] />