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