React で JSX をそのままレンダリングできるコンポーネントを作った
BRANK

ユーザーにテンプレートエンジンを提供する際、さまざまなテンプレートエンジンがありますが、その中に React コンポーネントを組み込みたい場合(ex: <FollowButton> のようなものがあって、それを呼び出すとフォローする)、いくらかのハックが必要になったり、カスタムコンポーネントを用意したりと様々な工夫が必要になります。結局テンプレートというよりサイトスタイルを提供したいだけだし……ということであれば、 JSX を書いてもらってそのままそれが動けばいいのにな……と思ったので、 JSX をそのまま動かす仕組みを作りました。毎夜ちまちま作り続け、土日を経てそれなりの完成度になったので v1.0.0 で公開したし、ということでお披露目です。React JSX Renderer(以後 RJR)は JSX を解釈して React Node としてレンダリングしてくれるコンポーネントです。特に考えることはなく、いきなり JSX コードを入れていきなり動きます。ブラウザデモもあります → LIVE DEMOimport { JSXRenderer } from 'react-jsx-renderer'; render(<JSXRender code="<p>Hello, World</p>" />, mount) Binding を渡すことで、外部から変数も与えることが出来ます。render( <JSXRender…

zenn.dev
Related Topics: React