Question

大多数时候我使用Vue.js或React构建我的前端Web应用程序，主要是因为我喜欢他们的组件系统如何工作。所以现在我正在尝试建立像React这样的自己的javascript框架，这是我到目前为止所做的：

我正在使用Babel作为我的javascript，它与webpack捆绑在一起。我使用babel-plugin-transform-jsx来转换这个jsx类型表达式：

var object = (
  <article>
    <h1>Hello, kitten!</h1>
    <img href="http://placekitten.com/200/300" alt="A cute kitten"/>
    It is soooo cute.
  </article>
)

进入这个javascript对象：

var object = {
  elementName: 'article',
  attributes: {},
  children: [
    {
      elementName: 'h1',
      attributes: {},
      children: ['Hello, kitten!']
    },
    {
      elementName: 'img',
      attributes: {
        href: 'http://placekitten.com/200/300',
        alt: 'A cute kitten'
      },
      children: null
    },
    'It is soooo cute.'
  ]
}

我知道如何用这个对象构建一个真正的DOM，但是我想说我想在JSX中包含另一个组件，如下所示：

render() {
   <article>
      <OtherComponent />
   </article>
}

在OtherComponent类中，我将有一个渲染函数，它将被插入其父级，就像React一样。我怎么能这样做？

试图实现我自己的React相似的框架，组件系统

0 个答案: