118. Virtual DOM II - createElement

JavaScript
觉得这个题有帮助吗?

中等难度  -通过 / -执行

该问题是113. Virtual DOM I的后续。

假设你已经完成了这个题目,现在我们来看看React.createElement():

React.createElement(
  type,
  [props],
  [...children]
)
  1. 第一个参数是 type,其可以为Custom Component。不过在该题目中,只会是HTML标签名。
  2. 第二个参数是props,其只会是驼峰表示的(常用的) HTML属性
  3. 其余的参数是children,React中支持多种格式,该题目中只会是MyElement或者表示TextNode的字符串。

请实现createElement() 和 render() ,使得如下的代码可以生成和113. Virtual DOM I中一样的HTMLElement。

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')
  )
))

注意

  1. 该题目的目的不是要重复React的实现,你可以有和113. Virtual DOM I中不一样的元素表示格式。 ref、key 等基本功能之外的部分不在本题目考虑范围内,将会有单独的题目。
  2. Re-render的问题不需要考虑,将会有单独的题目。

争取15分钟以内搞定这个问题

讨论(17)