react 组件创建
/**
* 数据屏蔽
* Created by 2016-12-02.
*/
import React, {Component} from 'react'; export default class DataMaskingMain extends Component {
render() {
return (
<div>
开发中……
</div>
)
}
}
//定义一个组件
renderData = (history, xyml, columns, dataSource) => {
if (!history.id || !xyml.itemId) {
return <div style={{textAlign: 'center',marginTop: 30}}>暂无数据</div>;
} else return (
<Table bordered
size="small"
columns={columns}
dataSource={dataSource}
pagination={false}/>
) };
//================= render() {
return (
<div> <div className="block-box-header">
<div className="block-box-body">
//调用组件
{this.renderData(history, xyml, columns, dataSource)}
</div>
</div>
</div> );
}
react 组件创建的更多相关文章
- React: React组件创建的三种方式
一.简介 在前面介绍的React组件知识中,对于组件的创建我只是用了其中某一种方式.其实,在2013年React诞生之初,对于React组件的创建,仅仅只有一种方式,也即createClass函数,在 ...
- 二、React初体验之React组件创建
(中间因为应付各种考试,处理其他事情,隔了好时间没更新,现在终于有时间了,续上!) 本文为React初始体验,因此先不考虑文件如何组织,尽量以最简单的方式让大家了解React其中的原理. 在创建组件( ...
- React 组件开发注意事项
0.state的设定原则,如果render里用不到,则就不应该是一个state. 1.数组遍历时,用每一条数据的唯一标识作为key,尽量不要使用遍历的索引值作为key,如果它们从不重新排序,它们工作也 ...
- 1.3 React 组件
1.3.1 React 组件介绍 在 React 中组件是第一元素,是 React 的基础,一个 React 应用就是基于 React 组件的组合而成.前面的 JSX 练习过后,大家应该对 React ...
- angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式
基本语法: 动态属性: vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]= ...
- react组件的创建
最近项目接触react和rn,之前会一些vue和小程序,起初写react是很难受的,尤其是jsx的写法,不过2周过后感觉写起来有点舒服了... 目前react的组件一共有3种方式:React.crea ...
- 用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具
用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具 前言 上周,同事抱怨说 react 怎么不能像 angular 那样,使用命令行工具来生成一个组件.对呀,平时工作时,想要创建 ...
- React中创建组件的3种方式
目前作者所知道的创建react组件的方式有三种: 函数式定义(无状态组件) function MyComponent(props){ return( <h1>mycomponent< ...
- webStrom快捷键快速创建React组件
1. rcc + tab键 - - 用ES6模块系统创建一个React组件类 2. rccp + tab键 - - 创建一个带有PropTypes和ES6模块系统的React组件类 3. rcfc + ...
随机推荐
- Week08_day01 (Hive 自定义函数 UDF 一个输入,一个输出(最常用))
当我们进入企业就会发现,很多时候,企业的数据都是加密的,我们拿到的数据没办法使用Hive自带的函数去解决,我们就需要自己去定义函数去查看,哈哈,然而企业一般不会将解密的代码给你的,只需要会用,但是我们 ...
- [Google Guava] 3-缓存
原文地址 译文地址 译者:许巧辉 校对:沈义扬 范例 01 LoadingCache<Key, Graph> graphs = CacheBuilder.newBuilder() ...
- 27、AOP-AOP功能测试
27.AOP-AOP功能测试 AOP : [动态代理]指程序运行期间动态的将某段代码切入到制定方法位置进行运行的编程方式. 导入AOP模块:Spring AOP(spring-aspects) 定义一 ...
- Vivado RAM使用
RAM使用的几点说明: 1,RAM的读写位宽可以不同,举例:写的位宽为8(1Byte),读的位宽为1(1bit),那么读的地址就变成了写地址的8倍,即位宽增加3bit.
- 【题解】[Noip2010]机器翻译-C++
题目Description小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章.这个翻译软件的原理很简单,它只是从头到尾,依次将每个英文单词用对应的中文含义来替换.对于每个英文单词,软件 ...
- 020_linux驱动之_输入子系统按键应用
(一)分配一个输入子系统结构体 static struct input_dev *buttons_dev; /*分配一个input_dev结构体*/ (二)设置这个输入子系统需要的动作 /* 1. 分 ...
- java.io.ObjectInputStream类详解
1.public class ObjectInputStream extends InputStream implements ObjectInput, ObjectStreamConstants分析 ...
- windows平台下MySQl的安装、破解和使用
#1.下载:MySQL Community Server 5.7.16 http://dev.mysql.com/downloads/mysql/ #2.解压 如果想要让MySQL安装在指定目录,那么 ...
- 元祖(tuple)
元祖和列表几乎是一样的: 列表是可以进行修改的,它可以填加一个元素,也可以移除一个元素,但元祖是不能修改的 如果我们以后想导一个集合,这个集合以后不允许修改,我们用元祖:如何我们想让别人进行修改,我们 ...
- jquer属性 offset、position、scrollTop
尺寸操作 1.获取宽高 a) jq对象.height/width () :只有获取高度/宽度 尺寸,不包括padding和margin 和 border 2.设置宽度 ...