reactの動的レンダリング

前提

サーバーから受け取ったデータでループを回して、renderするコンポーネントを分けたかった。

const itemNode = this.state.items.map(item => {
      return(
        <"item.typeに応じたコンポーネント"/>
      )
    })

item.typeに格納された文字列に対応する、コンポーネントをrenderしたい。
例えば、item.type = 'TextItem' → <TextItem />

試したこと

evalとcreateElementを使ってみる。

return(
      React.createElement(eval(item.type), props)
    )

eval(item.type)がundefineになりうまくコンポーネントを呼び出せない。

import ◯◯ from ..
...
console.log(eval(item.type)) // undefineのエラー
console.log(◯◯) // 関数が返ってくる

わかったこと

コンポーネントは変数ではなく関数？でもクラス？とにかく、import ◯◯ from ..でインポートしたら、evalとかを使わず◯◯を直接呼ばないとエラーが出る。

解決策

hashにimportしたコンポーネントを格納しておけば動的に呼び出せる！！

const Components = {
  ButtonItem  : LpButtonItem,
  TextItem    : TextItem,
  ListItem    : ListItem,
  TableItem   : TableItem,
  PictureItem : PictureItem,
}
...

const itemNode = this.state.items.map(item => {
  const Component = Components[item.type]
      return(
        <Component {...this.props}/>
      )
    })

// <Components[item.type] {...this.props}/> はコンパイルしてくれない

最後に

まだ理解しきれてないところがあるので、間違っているところやこうしたらもっと簡単！、などあればコメントお願いします！