8

https://github.com/akxcv/vueraを使用して vue.js アプリにhttps://react-table.js.org/#/story/readmeを統合しようとしています。

私のmain.js：

import Vue from 'vue'
import { VuePlugin } from 'vuera'
import App from './App'
import router from './router'


Vue.config.productionTip = false

Vue.use(VuePlugin)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
})

私の HelloWorld.vue:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

    <ReactTable :data="data" :columns="columns" />

  </div>
</template>

<script>
import ReactTable from 'react-table'
import 'react-table/react-table.css'

export default {
  name: 'HelloWorld',
  components: { ReactTable },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      columns: [{ Header: 'Name', accessor: 'name' }],
      data: [ {name: 'tom'}]
    }
  }
}
</script>

このコードを実行すると、コンソールに次の 2 つのエラーが表示されます。

[Vue warn]: Error in mounted hook: "TypeError: children is not a function"

found in

---> <ReactWrapper>
       <ReactTable>
         <HelloWorld> at src/components/HelloWorld.vue
           <App> at src/App.vue
             <Root>

と：

vue.esm.js?efeb:1717 TypeError: children is not a function
    at ReactTable.render (index.js?5f89:822)
    at eval (ReactCompositeComponent.js?063f:793)
    at measureLifeCyclePerf (ReactCompositeComponent.js?063f:73)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js?063f:792)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js?063f:819)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js?063f:359)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js?063f:255)
    at Object.mountComponent (ReactReconciler.js?c56c:43)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js?063f:368)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js?063f:255)

コーディングが間違っているのでしょうか、それとも vuera プラグインが ReactTable コンポーネントの統合を正しく処理しないのでしょうか?

アイデアをありがとう！

4

1 に答える 1

3

そのため、プロジェクトを再作成したところ、問題なく機能しました。以下は、使用した依存関係のセットです。あなたのケースは、バージョンの不一致の問題である可能性があると思います

  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-table": "^6.8.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuera": "^0.2.1"
  }

上記のバージョンで試してみてください。出力は

働く

クローンしてテストするだけの場合、プロジェクトは以下のリンクから入手できます

https://github.com/tarunlalwani/react-vue-integration

于 2018-04-10T14:20:11.263 に答える