在 Vue.js 中使用 React-table.js 时出错

Posted

技术标签:

【中文标题】在 Vue.js 中使用 React-table.js 时出错【英文标题】:Error while using React-table.js in Vue.js 【发布时间】:2018-06-15 12:32:12 【问题描述】:

我正在尝试使用 https://github.com/akxcv/vuera 将 https://react-table.js.org/#/story/readme 集成到 vue.js 应用程序中。

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

运行此代码时,我在控制台中收到两个错误:

[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 组件集成?

非常感谢您的任何想法!

【问题讨论】:

可以获得最小的 git repo 吗?否则设置环境会占用一些时间 【参考方案1】:

所以我重新创建了项目,它对我来说工作得很好,下面是我使用的一组依赖项。我认为您的情况可能只是版本不匹配问题

  "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

【讨论】:

很抱歉延迟批准答案。设法克隆你的回购并让它工作!非常感谢您的努力,非常感谢!

以上是关于在 Vue.js 中使用 React-table.js 时出错的主要内容,如果未能解决你的问题,请参考以下文章

使用按钮在 React 中的 react-table 上触发过滤功能

使用 Storybook 进行 React-table[v7] 渲染

渲染 react-table 中一行的组件 oclick (https://github.com/react-tools/react-table)

如何在 React-Table 上获取单元格值?

为啥在使用 react-table 时使用 `useTable` 而不是 `ReactTable`

找不到模块:无法解析“react-table/react-table.css”