vue怎麼用react元件

vue使用react元件的方法：先安裝依賴；然後編輯【main.js】；最後加入需要引用的react元件，程式碼為【import MyReactComponent from './MyReactComponent'】。

【相關文章推薦：vue.js】

vue使用react元件的方法：

1. 安裝依賴

npm i -S vuera
npm install --save react react-dom

2. 編輯main.js:

import { VuePlugin } from 'vuera'Vue.use(VuePlugin)

#3. 加入需要引用的react元件

import MyReactComponent from './MyReactComponent'

這個時候發現第一個問題：

不難發現，這是vue項目中未jsx檔案格式的問題所導致

解決方法：

編輯webpack.base.conf.js，加入對jsx的支援

test: /\.( js|jsx)(\?.*)?$/

這時候第二個問題出現了：

原因：

.babelrc檔案中預設引入了transform-vue-jsx，此外掛程式將jsx轉義成h function的形式供vue呼叫。

解決方法：

npm install --save-dev babel-plugin-transform-react-jsx

並且在.babelrc檔案中

#用transform-react-jsx取代transform-vue-jsx

相關免費學習推薦：JavaScript（影片）

#

以上是vue怎麼用react元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！