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語法。