這篇文章主要介紹vue如何使用react組件，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián) - 資陽(yáng)托管服務(wù)器，四川服務(wù)器租用，成都服務(wù)器租用，四川網(wǎng)通托管,綿陽(yáng)服務(wù)器托管，德陽(yáng)服務(wù)器托管，遂寧服務(wù)器托管，綿陽(yáng)服務(wù)器托管，四川云主機(jī)，成都云主機(jī)，西南云主機(jī)，資陽(yáng)托管服務(wù)器，西南服務(wù)器托管，四川/成都大帶寬，成都機(jī)柜租用，四川老牌ＩＤＣ服務(wù)商

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

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'

這個(gè)時(shí)候發(fā)現(xiàn)第一個(gè)問(wèn)題：

不難發(fā)現(xiàn)，這是vue項(xiàng)目中未jsx文件格式的問(wèn)題所導(dǎo)致

解決辦法：

編輯webpack.base.conf.js，加入對(duì)jsx的支持

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

這個(gè)時(shí)候第二個(gè)問(wèn)題出現(xiàn)了：

原因：

.babelrc文件中默認(rèn)引入了transform-vue-jsx，此插件將jsx轉(zhuǎn)義成h function的形式供vue調(diào)用。

解決辦法：

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

并且在.babelrc文件中

用transform-react-jsx替換transform-vue-jsx

以上是“vue如何使用react組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：vue如何使用react組件-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://weahome.cn/article/dpeeph.html