ReactコンポーネントをVue.jsみたいに素のHTMLに配置する

ReactコンポーネントをVue.jsのように、コンポーネント名のタグで呼び出す小ネタです。具体的には下記のようにするとコンポーネントの実行結果が表示されるようになります。

<my-component moji="aiu" :obuje="{a: 'a', b: 'b'}"></my-component>

やり方としては下記のようなコードを利用します。anyは手抜きです。単に指定したタグ名を探して、見つかった場合はその属性を取得してコンポーネントのプロパティとして渡してrenderしているだけです。

import React from 'react'
import { render } from 'react-dom'

type Components = {
  [domId: string]: any
}

function getPropertyName(originalName: string) {
  let property = ''
  for (let i = 0; i < originalName.length; i++) {
    const c = originalName.charAt(i)
    if (c === '-') {
      i++
      property += originalName.charAt(i).toUpperCase()
    } else {
      property += c
    }
  }
  return property
}

export function startComponents(components: Components) {
  for (const id in components) {
    const component = components[id]

    const targets = document.querySelectorAll(id)
    targets.forEach(target => {
      const props: { [key: string]: any } = {}
      if (target.hasAttributes()) {
        target.attributes
        for (let i = 0; i < target.attributes.length; i++) {
          const attribute = target.attributes[i]
          if (attribute.name.charAt(0) === ':') {
            props[getPropertyName(attribute.name.substring(1))] = JSON.parse(
              attribute.value
            )
          } else {
            props[getPropertyName(attribute.name)] = attribute.value
          }
        }
      }

      render(React.createElement(component, props), target)
    })
  }
}

ここのコツとして、属性は大文字小文字が関係ないようなので、キャメルケースのプロパティ名を使いたい時はこれもVue.jsと同様にハイフンを利用します。そのための変換処理も入れています。

<my-component :my-property="{a: 'a', b: 'b'}"></my-component>

例えばさっきのコンポーネントを使う場合は下記のように初期化します。

import MyComponent from './components/MyComponent'

startComponents({
  'my-component': MyComponent
})

これでHTML上に簡単にReactコンポーネントを表示できるようになりました。まあガッツリちゃんとやろうと思うと支障が出てくる箇所も出てくる可能性はありますので、あくまでもちょっとした手抜き対応です。