BFE.devでのAI解答例 - JavaScript コーディング問題
140. Virtual DOM III - Functional Component

解法:

Functional Componentをサポートするには、createElement()に少し変更を加える必要があります。

1. もし要素がFunction Componentなら、呼び出し、その戻り値をcreateElementの引数とする。
2. それ以外は、通常通りcreateElementを呼び出す。

また、render()にも少し変更を追加する必要があります。

1. もしMyElementがFunction Componentなら、呼び出して戻り値を再びrender()に渡す。
2. さもなくば、新しい実際のDOMノードを作成し、子要素を再帰的にすべて処理し、DOMノードに追加する。

実際のコードは以下の通りです：

function createElement(MyElement, props, ...children) {  if (typeof MyElement === 'function') {    return MyElement(props)  }  const element = document.createElement(MyElement)  for (let [key, value] of Object.entries(props)) {    if (key === 'className') {      element.setAttribute('class', value)    } else {      element.setAttribute(key, value)    }  }  children.flat().forEach(child => {    if (typeof child === 'string') {      element.appendChild(document.createTextNode(child))    } else {      element.appendChild(createElement(child))    }  })  return element}function render(MyElement, container) {  while (container.firstChild) {    container.removeChild(container.firstChild)  }  const element = createElement(MyElement)  if (typeof element === 'string') {    container.appendChild(document.createTextNode(element))  } else {    container.appendChild(element)  }}

これで、Functional Componentも含めて正しく結果が表示されます。