140. Virtual DOM III - Functional Component

こちらは118. Virtual DOM II - createElementの続きです。

問題118では、<p/>や<div/>などのHTML要素をサポートするcreateElement()とrender() を実装することが求められる。

この問題においては、Functional Componentもサポートしてください。

Functional Component は関数で：

1. 一つの object 引数 -propsを受ける。propsにはchildrenとclassName と他の属性が入る。
2. createElement()を実行しMyElementをを返す。

例えば、 Function Component - Titleがあるとする

const h = createElement
const Title = ({children, ...res}) => h('h1', res, ...children)

普通のHTML要素として使えるはず。

h(Title, {}, 'This is a title')

h(Title, {className: 'class1'}, 'This is a title')

必要に応じて、118. Virtual DOM II - createElementのcreateElement() と render()を弄ってください。問題118に書かれているサンプルは以下の書き方でも動くように。

const Link = 
  ({children, ...res}) => h('a', res, ...children)
const Name = 
  ({children, ...res}) => h('b', res, ...children)
const Button = 
  ({children, ...res}) => h('button', res, ...children)
const Paragraph = 
  ({children, ...res}) => h('p', res, ...children)
const Container =  
  ({children, ...res}) => h('div', res, ...children)

h(
  Container,
  {},
  h(Title, {}, ' this is '),
  h(
    Paragraph,
    { className: 'paragraph' },
    ' a ',
    h(Button, {}, ' button '),
    ' from ',
    h(
      Link, 
      { href: 'https://bfe.dev' }, 
      h(Name, {}, 'BFE'), 
      '.dev')
  )
)