blocks|key|298247|text|++++import+React+from+"react";
++++import+ReactDOM+from+"react-dom";
++++import+ReactDataGrid+from+"react-data-grid";

++++const+columns+=+[
++++++{+key:+"id",+name:+"ID",+editable:+true+},
++++++{+key:+"title",+name:+"Title",+editable:+true+},
++++++{+key:+"count",+name:+"Count",+editable:+true+}
++++];

++++const+rows+=+[
++++++{+id:+0,+title:+"row1",+count:+20+},
++++++{+id:+1,+title:+"row1",+count:+40+},
++++++{+id:+2,+title:+"row1",+count:+60+}
++++];

++++class+App+extends+React.Component+{
++++++render()+{
++++++++return+(
++++++++++<ReactDataGrid
++++++++++++columns={columns}
++++++++++++rowGetter={i+=>+rows[i]}
++++++++++++rowsCount={3}
++++++++++++minHeight={150}
++++++++++++enableCellSelect={true}
++++++++++/>
++++++++);
++++++}
++++}

++++const+rootElement+=+document.getElementById("root");
++++ReactDOM.render(<App+/>,+rootElement);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|298248|https://codesandbox.io/s/rdg-cell-editing-h8bnr|unstyled|offset|length|298249|答案是在上面的代码中，上面的代码是有效的|298250|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1B|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|S|8|@]|9|@$G|T|H|U|1|V]]|A|$]]|$1|I|3|J|5|F|7|W|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|E]]]]

<pre><code> import React from "react";
 import ReactDOM from "react-dom";
 import ReactDataGrid from "react-data-grid";

 const columns = [
 { key: "id", name: "ID", editable: true },
 { key: "title", name: "Title", editable: true },
 { key: "count", name: "Count", editable: true }
 ];

 const rows = [
 { id: 0, title: "row1", count: 20 },
 { id: 1, title: "row1", count: 40 },
 { id: 2, title: "row1", count: 60 }
 ];

 class App extends React.Component {
 render() {
 return (
 &lt;ReactDataGrid
 columns={columns}
 rowGetter={i =&gt; rows[i]}
 rowsCount={3}
 minHeight={150}
 enableCellSelect={true}
 /&gt;
 );
 }
 }

 const rootElement = document.getElementById("root");
 ReactDOM.render(&lt;App /&gt;, rootElement);
</code></pre>

<a href="https://codesandbox.io/s/rdg-cell-editing-h8bnr" rel="nofollow noreferrer">https://codesandbox.io/s/rdg-cell-editing-h8bnr</a>

the answer is in the above code this above code is working

blocks|key|2338832|text|你真的不需要降级。问题是没有导入css。如果你能从node-modules导入css，它就能工作。对我来说，解决办法是我采用了整个css，我们现在可以自我维护css，在需要的时候进行更改。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2338833|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You don't really need to downgrade. The issue is that the css is not being imported.
If you can import css from node-modules, it'll work.
Workaround for me was I took the whole css and we are now self-maintaining the css, making changes when needed.

blocks|key|2338827|text|如下所示导入CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2338828|import+'react-data-grid/dist/react-data-grid.css';|code-block|syntax|javascript|2338829|应该没问题。|2338830|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Import the CSS like so :

<pre><code>import 'react-data-grid/dist/react-data-grid.css';
</code></pre>

It should be fine.

blocks|key|298252|text|我也无法加载css，我通过包含以下内容解决了这个问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|298253|import+ReactDataGrid+from+'react-data-grid/dist/react-data-grid.min.js';|code-block|syntax|javascript|298254|而不是|298255|import+ReactDataGrid+from+'react-data-grid';|298256|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I couldn't load the css either, I got around this by including
<pre><code>import ReactDataGrid from 'react-data-grid/dist/react-data-grid.min.js';
</code></pre>
instead of
<pre><code>import ReactDataGrid from 'react-data-grid';
</code></pre>

I have a problem with ReactDataGrid component. I have already installed react-data-grid. The code is the same as in the reac grid's web:

<pre><code>const columns = [
 { key: 'id', name: 'ID' },
 { key: 'title', name: 'Title' },
 { key: 'count', name: 'Count' }];

const rows = [{ id: 0, title: 'row1', count: 20 }, { id: 1, title: 'row1', count: 40 }, { id: 2, title: 'row1', count: 60 }];


class App extends React.Component {
 render() {
 return (
 &lt;ReactDataGrid
 columns={columns}
 rowGetter={i =&gt; rows[i]}
 rowsCount={3}
 minHeight={150} /&gt;
 )
 }
}

export default App;
</code></pre>

and i get:
<a href="https://i.stack.imgur.com/TbmMy.png" rel="nofollow noreferrer">Result</a>

Thank you!

React Data Grid shows bad

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个关于ReactDataGrid组件的问题。我已经安装了react-data-grid。代码与reac grid的web中的代码相同：const columns = [  { key: 'id', name: 'ID' },  { key: 'title', name: 'Title' },  { key: 'c...

问React数据网格显示错误
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React数据网格显示错误EN