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插件并使用JSX语法。