前提・実現したいこと
下記のようなHTML構造を表した①JSONから②HTMLを生成しようとしていますが、
どのような再帰関数を書いて実現すれば良いか悩んでいます。(JSONはあくまで例であって「elemType」「children」変数はいくつも書く事が出来ます。)
可能であれば、JSX構文の回答だと嬉しいですが、JavaScriptでも構いません。
どなたか頭の柔らかい方ご教示をお願いします。。。
①JSON
JSON
1{ 2 "elemType":"div", 3 "children":[ 4 { 5 "elemType":"h1" 6 }, 7 { 8 "elemType":"div", 9 "children":[ 10 { 11 "elemType":"p" 12 }, 13 { 14 "elemType":"p" 15 } 16 ] 17 } 18 ], 19}
②HTML(変換結果)
HTML
1<div> 2 <h1></h1> 3 <div> 4 <p></p> 5 <p></p> 6 </div> 7</div>
###自身で書いたコード
tsx
1 2//関数② 3const getChild = (obj) => { 4 5 if (obj["children"] !== undefined) { 6 const elements = createElement(obj["children"]); 7 // ここで詰まり質問に至りました。。 8 } else { 9 return React.createElement(obj["elmType"], {}, null); 10 } 11}; 12 13//関数① 14const createElement = (obj) => { 15 if (obj.length !== undefined) { 16 return obj.map((obj2) => { 17 return getChild(obj2); 18 }); 19 } else { 20 return getChild(obj); 21 } 22}; 23 24const customFormatter = JSON.parse(CustomFormatter); //CustomFormatterがJSONになります 25const html = createElement(customFormatter);
回答3件
あなたの回答
tips
プレビュー