react-table组件入门和在IE11上遇到的坑
来源:互联网 发布:win10软件小助手 编辑:程序博客网 时间:2024/06/08 14:59
react-table是一个非常好的渲染数据表的一个react的前端控件,当时之所以选择这个库就是因为其每列的列宽可以自己拖拽变宽或者变窄,而且其可以非常容易的被定制。
我们可以看到起用户的给Star已经达到了2k,看来应该是一个不错的模块。
而且其提供了可以在线练习和修改代码的范例和平台,非常的方便初学者快速掌握。
左边修改代码,右边立马就能看到修改的结果。
下面就是一个简单的例子,
import React from "react";import { render } from "react-dom";import { makeData, Logo, Tips } from "./Utils";// Import React Tableimport ReactTable from "react-table";import "react-table/react-table.css";class App extends React.Component { constructor() { super(); this.state = { data: makeData() }; } render() { const { data } = this.state; return ( <div> <ReactTable data={data} columns={[ { Header: "Name", columns: [ { Header: "First Name", accessor: "firstName" }, { Header: "Last Name", id: "lastName", accessor: d => d.lastName } ] }, { Header: "Info", columns: [ { Header: "Age", accessor: "age" }, { Header: "Status", accessor: "status" } ] }, { Header: 'Stats', columns: [ { Header: "Visits", accessor: "visits" } ] } ]} defaultPageSize={10} className="-striped -highlight" /> <br /> <Tips /> <Logo /> </div> ); }}render(<App />, document.getElementById("root"));
是不是感觉特别的棒。而且还支持表格归类,表格的嵌套,表格的定制,功能非常的强大。
因为笔者的项目要求其能同时支持IE11,Chrome和FireFox,当笔者使用React-table组件后,在Chrome和FireFox上面都没有问题,能显示正常,同样的代码在
IE11上就显示不出来,只能显示分页。
@在Chrome/FireFox显示正常
@在IE11上显示不出来
代码如下:
import React from 'react';import ReactTable from "react-table";import "react-table/react-table.css";export default class Example extends React.Component { constructor(){ super(); let rows = []; for (let i = 1; i < 1000; i++) { rows.push({ ID: i, Title: 'Title ' + i, Count: i * 1000 }); }; this.state={ columns:[ { Header: 'id', accessor: 'ID', id: "id" }, { Header: 'title', accessor: 'Title', id: "title"}, { Header: 'count', accessor: 'Count', id: "count" } ], _rows:rows } } render() { return ( <div> <ReactTable columns={this.state.columns} data = {this.state._rows} className="-striped -highlight" /> </div> ); }}
那么解决的办法是什么呢? 原来是因为IE11上的一个样式不兼容引起的。所以需要新建一个样式,比如在新建一个react-table-fix-ie.css文件,在里面写入下面的代码:
.ReactTable { display: block;}
然后在上面的代码中引入这个样式文件,问题就解决了。
import React from 'react';import ReactTable from "react-table";import "react-table/react-table.css";import '../../style/css/react-table-fix-ie.css';export default class Example extends React.Component{ ....}
好了,今天的分享就到此为止把。
阅读全文
1 0
- react-table组件入门和在IE11上遇到的坑
- 说说我自己在window10上配置React Native 的过程和所遇到的坑
- React Native在Genymotion上运行遇到的问题
- React入门02-react的组件
- 从IE6到IE11上运行WebGL 3D遇到的各种坑
- jQuery在IE11下提交form时遇到的问题
- React Native获取组件在屏幕上的绝对位置(包括自定义组件)
- React入门03-react中操作组件的dom节点
- 【React Native】导入github上react native遇到的问题。
- 我在React Native开发中遇到的一些坑
- 在windows上搭建React Native开发环境时遇到licence问题的解决
- 在React中使用extends React.Component定义的组件
- 在soapClient上遇到的坑
- Genymotion在win10上遇到的坑
- React Native遇到的坑
- React入门笔记(二):组件和AJAX
- 企业IT管理员IE11升级指南【7】—— Win7和Win8.1上的IE11功能对比
- 企业IT管理员IE11升级指南【7】—— Win7和Win8.1上的IE11功能对比
- 3种指针
- pycharm配置Anaconda解释器
- SQL语句
- 二叉树怎么打印根节点到指定节点的路径及两个节点之间的路径
- 第二章 线性表(链表的建立与合并)
- react-table组件入门和在IE11上遇到的坑
- 10.20mysql优化以及修改权限
- LeetCode 1. Two Sum
- mysql聚簇索引与非聚簇索引
- Javascript计算器(一)-基本功能实现
- Python 错误和异常
- 【编译原理】词法分析(二)
- 探索者 机械篇
- Python学习---用户输入和while循环