深い階層を持つHTMLを生成するための、どうでも良い関数を作ったのメモ(React)

深い階層を持つHTMLを生成するための関数を書いた。

あまり使いみちはない。
下記で書いている、Reactを自作する際に生み出した謎の副産物である。

shinshin86.hateblo.jp

以下、ソースコード。

const generateDeepElement = (depth) => {
  depth = depth - 1;
  
  if(depth < 1) {
    return createElement("p", null, 'HELLO!!!!!')
  } else {
    return createElement("div", null, generateDeepElement(depth))
  }
}

const element = createElement(
  "div",
  { id: "foo" },
  createElement("h1", null, "hello"),
  createElement("p", null, createElement("b", null, "world")),
  generateDeepElement(10)
)

例えば上の処理を実行して render 関数を動かすと、下記のようなHTMLが生成される。

<div id="foo">
  <h1>hello</h1>
  <p><b>world</b></p>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <p>HELLO!!!!!</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

繰り返すが実用度はゼロ。

せっかく書いたので残しておこう、という精神でこちらをポストした。