vue中使用JSX報錯，如何解決

Support for the experimental syntax 'jsx' isn't currently enabled (32:12):

  30 |   },
  31 |   render() {
> 32 |     return <><div class="title">八皇后問題</div></>
     |            ^
  33 |   }
  34 | };
  35 |

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

從上面報錯可以看出需要在項目中.babelrc 配置文件添加@vue/babel-preset-jsx

1.下載依賴包

Install the dependencies:

# for yarn: 

yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

# for npm: 

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save

2.在.babelrc文件中添加@vue/babel-preset-jsx

{
  "presets": ["@vue/babel-preset-jsx"]
}

3.jsx代碼模板

<script>
const grids = new Array(8).fill(1).map((_, r) => {
  return new Array(8).fill(1).map((_, c) => {
    return {
      key: `key-${r * 8 + c}`,
      ok: true
    }
  })
})

export default {
  render() {
    return (
      <div>
        <div class='title'>八皇后問題</div>
        <div class='grid'>
          {grids.map((row, i) => {
            return (
              <div class='row' key={i}>
                {row.map((cell) => {
                  return (
                    <div class='cell' key={cell.key}>
                      {cell.ok ? <div>Q</div> : null}
                    </div>
                  )
                })}
              </div>
            )
          })}
        </div>
      </div>
    )
  }
}
</script>

參考

vue中使用jsx報錯

 

免責聲明

本文只是在學習Vue 基礎的一些筆記，文中的資料也會涉及到引用，具體出處不詳，商業用途請謹慎轉載。