118. Virtual DOM II - createElement
シェアしよう
簡単 - accepted / - tried
この問題は113. Virtual DOM Iの続きです。
上記の問題は解決済みになっているなら、React.createElement()のinterfaceを見よう:
React.createElement(
type,
[props],
[...children]
)
- 1番目の引数はtype、Custom Componentもサポートしているが、この問題においてはHTMLタグ名だけを想定すると良い。
- 2番目はprops、常用のHTML属性の集合
- その他の引数はchildren、Reactにおいては色なdata typeをサポートしているが、この問題では、Elementを表示するMyElementとTextNodeを表示するstringしかないと想定すると良い。
createElement() と render()を実装してください、下記のコードは113. Virtual DOM Iのサンプルコードが生成するHTML Elementと同じになる想定。
const h = createElement
render(h(
'div',
{},
h('h1', {}, ' this is '),
h(
'p',
{ className: 'paragraph' },
' a ',
h('button', {}, ' button '),
' from ',
h('a',
{ href: 'https://bfe.dev' },
h('b', {}, 'BFE'),
'.dev')
)
))
補足
- この問題の目的は、Reactのimplementationを再現することではない。113. Virtual DOM Iと違うobject formatでもOK
- ref、key など基本機能以外featureは、他の問題で解決するので、こちらは無視して良い。 Re-renderは考慮してなくても良い、別の問題がある。