vue中使用React组件的方法，支持React Hooks

最近开发vue项目需要加载一个React开发的组件库。之前用过vuera这个库，github.com/akxcv/vuera ，本来认为应该没有什么问题。结果踩坑了。

事情是这样的，这个库呢，采用React Hooks方式开发类似这样：

test.jsx

import React from 'react'
export default () => {
  const [value, setValue] = React.useState('')
  return (
    <input
      type="text"
      value={value}
      onChange={e => setValue(e.currentTarget.value)}
    />
  )
}

在demo.vue页面这样引用

<template>
    <div ref="react"></div>
</template>

<script>

import ReactDOM from 'react-dom'
import React from 'react'
import App from './test.jsx'

export default {
 mounted () { 
    ReactDOM.render(React.createElement(App), this.$refs.react)
}
</script>

这个时候会报错

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object

分析原因是vue cli 本身支持vue 的jsx语法，影响了React Hooks正常执行。

修改babel.config.js 改为下面，问题解决。

module.exports = {
  presets: [
    [
      '@vue/cli-plugin-babel/preset',
      {
        jsx: false,
      },
    ]
  ],
  plugins: ['transform-react-jsx'],
}