Javascript VUE.JS渲染函数

我正在学习Vue.js，在使用bellow渲染功能时遇到了问题：

这是我从组件调用的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>
    )
  }
}

从“./按钮”导入按钮
导出默认值{
功能性：对，
渲染（h）{
返回(
B
我
H1
氢
保险商实验室
OL
)
}
}

我需要导出上面的函数，但是我得到了一个错误

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

5 |渲染（h）{
6 |返回(
>  7 |         
|         ^
8 | B

---

调用此函数时出现错误，不确定这是否仅在redux中使用backqouts/backticks有效，您确实可以将HTML标记与JavaScript混合使用。但Vue.js中没有此类内容。唯一的方法是将HTML包装在模板字符串中：

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

返回(`
...
`

或者使用vue的

模板格式（如果您使用的是webpack）。这些组件如下所示：

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

<script>
    export default new Vue(

    );
</script>

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

导出默认的新Vue(
);
//你的风格在这里

然后就不需要

render（）

方法了

---

PS：是的，正如@Bert所建议的，你也可以使用Babel和JSX语法。

首先我不太明白这个问题。但是为了给你指出正确的方向，请使用ES6模板字符串返回标记。看看这个：@bernIt似乎你应该提供一个

标记
库，你可以使用。@henk.io&GONG-我创建了一个组件t调用编辑器，此组件使用上面的render函数导入javascript文件，JS文件导入按钮标记所有内容都应在组件编辑器中呈现。因此，我的问题是因为我不了解vue如何工作，因为我认为可能可以在vue中将HTML标记与javascript混合。发布的信息对我有帮助了解vueJS的基本知识，感谢提供的提示