Vue use React component methods, support React Hooks

Recent vUE development projects require loading a component library developed by React. I used the vuera library before, github.com/akxcv/vuera, and thought there should be no problem. I stepped in a hole.

This library is developed using React Hooks like this:

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)}
    />)}Copy the code

This is referenced in the demo.vue page

<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>


Copy the code

An error is reported at this time

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

The vue CLI supports the JSX syntax of vue, which affects React Hooks.

Change babel.config.js to the following, problem solved.

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