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 + ...
随机推荐
- jquery动态加载并解决被加载页面js失效问题
代码布局结构分为 header left content html代码如下: <!DOCTYPE html> <html lang="zh-CN"> & ...
- tp5 sum某个字段相加得到总数
方法 说明count 统计数量,参数是要统计的字段名(可选)max 获取最大值,参数是要统计的字段名(必须)min 获取最小值,参数是要统计的字段名(必须)avg 获取平均值,参数是要统计的字段名(必 ...
- pipenv安装报错ReadTimeoutError
原因:pip下载源默认设置为国外 解决:将pip下载源切换为国内地址 操作: 在C:\Users\Administrator\下新建pip文件夹,在创建pip.ini文件,拷贝下面代码进去,保存 切换 ...
- 原生JS发送Ajax请求、JSONP
一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心 ...
- 模块讲解---numpymo模块,matplotlib模块,pandas模块
目录 numpy模块 matplotlib模块 pandas模块 numpy模块 numpy模块:用来做数据分析,对numpy数组(既有行又有列)--矩阵进行科学运算 在使用的时候,使用方法与其他的模 ...
- [Google Guava] 9-I/O
原文链接 译文链接 译者:沈义扬 字节流和字符流 Guava使用术语”流” 来表示可关闭的,并且在底层资源中有位置状态的I/O数据流.术语”字节流”指的是InputStream或OutputStrea ...
- 016_linux驱动之_原子操作
1. 原子操作 原子操作指的是在执行过程中不会被别的代码路径所中断的操作. 常用原子操作函数举例: atomic_t v = ATOMIC_INIT(0); //定义原子变量v并初始化为0 a ...
- Activiti--Activity数据库
23张表 ACT_RE_资源库流程规划表 act_re_deployment 部署信息表 act_re_model 流程设计模型部署表 act_re_procdef 流程定义数据表 ACT_RU_运行 ...
- Poj 2165 Milking Grid(kmp)
Milking Grid Time Limit: 3000MS Memory Limit: 65536K Description Every morning when they are milked, ...
- create-react-app 构建的项目使用代理 proxy
1. 正常运行 npm run eject (前三个步骤可省略,最好的是按照第四步操作) 2. create-react-app 的版本在低于 2.0 的时候可以在 package.json 增加 p ...