VUE.JS 渲染函数

Question

我正在学习 Vue.js，但在使用波纹管渲染功能时卡住了：

这是我从组件中调用的 javascript 文件。

import Button from './Button'

export default {
  functional: true,
    render(h) {
    return(
        <div id='toolbar'>
        <Button type='markup' tag='strong'> B </Button>
        <Button type='markup' tag='em'> I </Button>
        <Button type='section' tag='h1'> H1 </Button>
        <Button type='section' tag='h2'> H2 </Button>
        <Button type='section' tag='ul'> UL </Button>
        <Button type='section' tag='ol'> OL </Button>
        <slot />
      </div>
    )
  }
}

我需要导出上述函数，但出现错误。

      5 |     render(h) {
      6 |     return(
   >  7 |         <div id='mobiledoc-toolbar'>
        |         ^
      8 |         <Button type='markup' tag='strong'> B </Button>

调用此函数时出现错误，不确定这是否仅适用于使用 backqouts/backticks

Answer 1

在 redux 中，您确实可以将 HTML 标记与 JavaScript 混合使用。但是在 Vue.js 中没有这样的东西。唯一的方法是将您的 HTML 包装在模板字符串中：

return(`
    <div id='mobiledoc-toolbar'>
    ...
    </div>
`

或者为 vue 使用 <template> 模板格式（如果您使用的是 webpack）。此类组件如下所示：

<template>
  <div id="toolbar">
  </div>
</template>

<script>
    export default new Vue(

    );
</script>

<style lang="scss">
  // Your styles here
</style>

然后就不需要render() 方法了。

PS：是的，正如@Bert 建议的那样，你也可以使用 Babel JSX Transform plugin 并使用 JSX 语法。