如何用react做一个表格

如何用react做一个表格

1、首先使用React.createClass方法创建一个组件;

2、在render中通过React.DOM创建table、tr、tbody标签;

3、在tr标签中使用map方法将数组中的数据输出到th标签中;

4、同样的使用map方法输出表格内容到td标签中即可。

代码如下:

Excel组件

var Excel = React.createClass({
    displayName:'Excel',
    getInitialState:function(){
        return {
            data:this.props.initialdata
        }
    },
    render:function(){
        return React.DOM.table({className:"table"+" "+"table-bordered"},//多个类用拼接
                React.DOM.thead(null,
                    React.DOM.tr(null,
                        this.props.headers.map(function(title,idx){
                        //map()方法,将数组的值传入回调函数
                        // arr.map(function(currentValue,index,arr),thisValue) 
                        //参数说明 function(currentValue,index,arr) 必须,函数,
                        //数组中的每个元素都会执行这个函数函数参数 函数参数 
                        // currentValue 必须 当前元素值 index 可选 
                        // 当前元素的索引值 arr 可选 当前元素属于的数组对象。
                            return React.DOM.th({key:idx},title);
                       })
                    )
                ),
                React.DOM.tbody(null,this.state.data.map(function(row,idx){
                    return React.DOM.tr({key:idx},
                        row.map(function(cell,idx){
                            return React.DOM.td({key:idx},cell)
                        })
                    )
                }))
            );
    }
});
var headers = ["book","author","lanage","sales"];
var data = [["math","jack","en","23"],["english","alice","23","en"]];
ReactDOM.render(React.createElement(Excel,{
    headers:headers,
    initialdata:data
}),document.getElementById('ex6'));

效果图:

Snipaste_2019-12-20_17-03-22.jpg

Image placeholder
前端答疑
未设置
  98人点赞

没有讨论,发表一下自己的看法吧

推荐文章
如何用react做增删

如何用react做增删1、使用react做一个输入框,点击提交在下面列表展示,点击对应的列表项,删除该项,如下:2、项目的数据结构,首先分析需求,一个input框,一个button,一个列表。可以把i

如何使用react做安卓app

如何使用react做安卓app一、首先,我们先创建一个react项目作为演示。1.全局安装create-react-app#全局安装 npminstall-gcreate-react-app2.构建一

如何利用Reworld做一个一键吸空投箱的效果

功能效果展示运行环境Win7,Win8,Win10Reworld版本体验版vc_redist.x64运行环境针对零基础读者的补充下载安装Reworld对应版本Reworld官网链接:http://ww

如何用react写页面跳转

如何用react写页面跳转1、使用react-router-dom中的Link实现页面跳转一般适用于,点击按钮或其他组件进行页面跳转,具体使用方式如下:import{Link}from'react-r

如何用react写轮播?

前提:安装好Node.js安装。【推荐阅读:nodejs怎么下载安装?】步骤:1、安装swiper使用node包管理器npm来安装swipernpminstallswiper--save2、在轮播组件

如何用react构建单页面

如何用react构建单页面react构建单页面需要使用react-router-dom库,所以我们需要先安装npminstallreact-router-dom-S下面以一个例子讲解,react构建单

笔记:element固定表头的表格,如果表格太宽了拉到最右侧会出现表头和内容不对齐的情况

在顶级样式文件里面加下面的代码.el-table--borderth.gutter:last-of-type{ display:block!important; width:8px!important

如何引用react-dom

如何引用react-dom引用react-dom很简单,首先你需要创建一个react项目,这里我们介绍两种方式,第一种是使用npm来创建,另一种是采用script标签引入react的方式创建项目。●使

如何使用react开发项目

如何使用react开发项目1、环境搭建开发react项目,环境搭建是第一步,react开发需要搭建nodejs环境,因为使用官方的脚手架搭建项目最为简单,而脚手架和webpack依赖于nodejs。w

如何下载使用react.js

如何下载使用react.js一、下载react.js、react-dom.js和babel.js在浏览器中输入这三个地址,将得到的页面全选后复制粘贴到本地的文件中,分别对应react.js、react

如何使用react native

如何使用reactnative一、首先安装react-native-cli脚手架工具npminstall-greact-native-cli二、使用react-native-cli创建一个初始化的工程

怎么用react写界面

怎么用react写界面用react写页面,官方的做法是采用jsx语法,JSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内

怎么用react写登陆框

怎么用react写登陆框1、创建一个Login组件,添加userName和userPassword状态;2、为输入框绑定onChange事件到changeUsername和changePassword

用react怎么做移动端

用react怎么做移动端1、首先使用create-react-app脚手架创建react项目;2、然后打开index.html文件,在头部添加meta元数据,设置用户网页的可视区域宽度为设备的宽度,初

用react怎么插图片

用react怎么插图片1、img标签引入图片因为react其实是通过js的reader函数渲染的页面,所以直接写src=“路径”是无法引入图片需要用下面的方式引入2、背景图片引入1第一种就是常规的新建

如何用vscode启动react项目

如何用vscode启动react项目要求:●具有nodejs环境、已安装npm●已安装vscode首先使用create-react-app脚手架创建一个项目。create-react-appdemo1

如何用npm下载react

如何用npm下载react●首先我们需要安装nodejs环境【Node.js安装教程】我们可以在cmd中输入node-v和npm-v来检测是否安装成功。node-v npm-v当两条命令都成功的输出了

深入浅出百亿请求高可用Redis(codis)分布式集群揭秘

摘要:作为noSql中的kv数据库的王者,redis以其高性能,低时延,丰富的数据结构备受开发者青睐,但是由于redis在水平伸缩性上受限,如何做到能够水平扩容,同时对业务无侵入性是很多使用redis

使用 Workerman 做一个聊天室

为什么要写这篇文章? 我学习Workerman好几次了,每次都失败(没做成想要的功能,原谅我比较笨)。但是这次也花了好几个小时,把之前没做成的功能实现了。其实就是两个简单的功能:一对一发送消息,广

css如何设置表格边框不重叠?

css如何设置表格边框不重叠?一、设置css属性border-collapse:collapse。table{ border-collapse:collapse; } tabletr{ border:

dw中如何设置表格css样式

1、新建一个空白文档,点击插入table,插入一个适合的表格。2、在表格内输入任意文字,右键css样式,新建,选择标签类型。(推荐学习:CSS视频教程)3、选择table,点击确定,根据需求定义tab

如何做一枚合格的数据产品经理

大数据文摘出品编译:王富贵来源:medium每一个公司都有产品经理。根据定义,产品经理负责统筹各方需求,选择业务模式,并根据公司产品的生命周期进行协调、研发、营销、运营。传统业务还好说,毕竟一些流程已

如何用别人的css样式

如何用别人的css样式使用别人的css样式首先需要引入,引入到自己的HTML文档中,主要有两种方式。1、下载别人的css样式,通过link标签引入。打开网站,按下f12打开开发者工具面板,选中Sour

如何用css做导航栏?

如何用css做导航栏?1、新建一个html文件,在head部分,编写css样式○list-style-type:none;是除掉导航前面默认带的点○lia,lia.active,lia:hover:n

Java的Lambda表达式有何用处?如何使用?

本文转载自知乎,之前刚接触到Lambda表达式,看了好多文章,看完也还是一脸懵逼,后来刷知乎刷到这篇文章,顿开茅塞,让我明白了Lambda表达式到底是个啥,咋用。最重要的是第一点,知道了这个,其他的要