使用 Play 框架实现 React-Datagrid答案

【问题标题】：Implementing React-Datagrid with Play Framework使用 Play 框架实现 React-Datagrid
【发布时间】：2016-09-16 16:02:42
【问题描述】：

我正在尝试使用从 WebJars 导入的 React-datagrid 库在 Play 项目中呈现表格。然而，当我运行该项目时，我遇到了这些问题：

“警告：React 无法找到 data-reactid 值 .0.1.1 的根组件节点。如果您看到此消息，可能意味着您在页面上加载了两个 React 副本. 此时，一次只能加载一个 React 副本。”
“未捕获的类型错误：无法读取未定义的属性 'firstChild'”

这是渲染表格的代码：

var data = [
    {id: 0, index: 1, firstName: 'John', city: 'Toronto', email: '123@hotmail.com'}
];

var columns = [
    { name: 'index', title: '#', width: 50 },
    { name: 'firstName' },
    { name: 'lastName'  },
    { name: 'city' },
    { name: 'email' }
];

var App = React.createClass({
    render: function(){
        return <DataGrid
            idProperty='id'
            dataSource={data}
            columns={columns}
            style={{height: 500}}
        />
    }
})

ReactDOM.render(<App/>, document.getElementById("testTable"));

这些是我在 HTML 文件中引用的脚本：

<script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.fullPath("react", "dist/react.js"))'></script>
<script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.fullPath("react-dom", "dist/react-dom.js"))'></script>
<script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.fullPath("react-datagrid", "dist/react-datagrid.js"))'></script>

这就是我的 build.sbt 中的内容：

"org.webjars" %% "webjars-play" % "2.4.0-1",
"org.webjars.npm" % "react-datagrid" % "2.0.1",
"org.webjars.bower" % "react-d3" % "0.2.2"

这是我正在关注的数据网格示例的链接： http://zippyui.com/react-datagrid/#/examples/basic

知道我做错了什么吗？

【问题讨论】：

标签： reactjs playframework sbt webjars

【解决方案1】：

我怀疑dist/react-datagrid.js 已预先打包运行所需的一切，包括另一个React。删除其他 react 脚本或找到不捆绑 React 的 react-datagrid 构建。

【讨论】：

当我删除其他脚本时，我只有 react-datagrid.js，我发现 React 和 ReactDOM 是未定义的，这意味着我没有加载 React 两次？
奇怪 - 如果您查看 dist/react-datagrid.js 的源代码，它看起来像是定义了 React。我可能正在查看错误的 src。
是的，当我在 intellij 的项目导航器中查看外部库时，我可以访问 react 和 react-dom jar；当我在 build.sbt 中包含 datagrid 时，它就可用了