1

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

我在我的 javascript 中使用 Babel，它都与 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 一样。我怎样才能做到这一点？

4

0 回答 0