

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

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

[code]

    {funcName:"func1"}　
    
[/code]

上記の値だった場合、

[code]

    `return (<func1/>)　　　`
    
[/code]

としてrenderingしたい

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

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

[code]

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

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


CC BY-SA 3.0
2018-04-10T10:14:30.027
43127
2018-04-12T05:46:57.303
2018-04-10T12:49:55.240
19110
28102
question
javascript reactjs
ReactのRenderに利用したい関数が文字列になっている場合の呼出し方


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

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

[code]

    React.createElement(window["func1"])
    
[/code]

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

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


CC BY-SA 3.0
2018-04-12T05:46:57.303
43179
2018-04-12T05:46:57.303
915
43127
answer