1

React のRender処理で困っていることがあります。
func1という関数があり、renderする際に呼び出します(例: return (`<func1/>`))。

例えば、下記のようなJSONの値にあるfuncNameにある文字列から 実際の関数名としてrenderしたいのですが、どうすればよろしいでしょうか?

{funcName:"func1"} 

上記の値だった場合、

`return (<func1/>)   `

としてrenderingしたい

いろいろ、自分でも検討してみましたが、evalで関数化したり変数に入れてrenderingしてもエラーになります。

なぜこの処理をしたいかというと、現在は下記の処理を入れてrenderingをしていますが、新しいfuncを追加するたびにif文を追加する必要があるため面倒なためです。

if(funcName.func1!=null){
return `<func1/>`
}else if(funcName.func2!=null){
return `<func2/>`
}・・・・関数を追加するたびにif文も追加

以上です。ご存知であれば回答をお願いします。

1 件の回答 1

1

ReactにおけるJSXは React.createElement(...) のシンタックスシュガーです。なので、JSXの代わりに React.createElement(...) を直接呼び出すようにすればお望みの動作が実現できるかと思います。

例えば、func1がグローバルに宣言されている関数だとしたら、

React.createElement(window["func1"])

とすることで <func1/> と同等のオブジェクトを得られます。

参考: https://reactjs.org/docs/jsx-in-depth.html

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。