基于 react 的Java web 应用—— 组件复用（后续需更新）
前言
实习第二周，被告知要用React与导师进行基于React的Javaweb 的开发，jinzhangaaaaa~由于React 这款框架没学过，看了一峰老师的基础入门教程，硬着头皮开始上了...
组件的复用
实现基本的需求之后，校阅代码时，发现 A 组件内有大量相似的代码，代码不够简洁，自然而然想到组件的复用。
先上demo：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var HelloReact = React.createClass({
// propTypes :{
// title: React.PropTypes.string.isRequired,
// },
// getDefaultProps : function () {
// return {
// name : " hello React"
// };
// },
// 渲染的 HTML 内容
render : function () {
return<div>
<h1>{this.props.title}
<div>
<h2>{this.props.name}</h2>
</div>
</h1>
<Child head="我是标题1" content="我是内容1" />
<Child head="我是标题2" content="我是内容2"> </HelloMessage>
</div>;
}
});
// 子组件 ： 全局定义 或者是在 父组件内定义均可
// 父组件里有很多数据[比如head,content] 需要从 父组件（调用）传递给子组件（定义），
// 在这里加上组件模板
var Child = React.createClass({
render: function() {
return<div>
<h1>标题： {this.props.head}</h1>
<h2>内容 ：{this.props.content} </h2>
</div>;
}
});
// var data = "123";
// var name = "React";
ReactDOM.render(
<HelloReact/>,
document.getElementById('app')
);
</script>
</body>
</html>以上的demo 的代码注释已经尽量详细，这里有个至今较为困惑的点：父子组件的关系明确；我的简单理解是；同一个的Child 组件 ，定义时，它为子组件，而在使用调用时，则为父组件; 若有错误，欢迎大家的指正！
写完demo，结合项目，开始改改改...
该项目属于老项目，现在的工作是在原来的基础上新增部分类似的功能板块，同时做相关的优化
项目组件文件夹的结构目录
app
components
ConsumeBill.jsx -----A 组件=demo中的HelloReact
ChildBill.jsx ------Child 组件
....
...
...
在A组件中需要引入Child 组件，在其 render方法中多次使用 Child组件 。[考虑代码阅读：将Child组件以外部文件的方式引入;若Child组件的HTML 代码非常简短，可无需外部引入，同demo中类似直接放在 A组件的React.createClass语句中] ;
继续先上demo：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var HelloReact = React.createClass({
// propTypes :{
// title: React.PropTypes.string.isRequired,
// },
// getDefaultProps : function () {
// return {
// name : " hello React"
// };
// },
// 渲染的 HTML 内容，
// 这里注意: JS语句 写在HelloReact组件中return [return 是React语句]外面，在HelloReact 组件的 **render方法**里面
render : function () {
let datas1 = {head:"我是标题1",content:"我是内容1"};
let datas2 = {head:"我是标题2",content:"我是内容2"};
return<div>
<h1>{this.props.title}
<div>
<h2>{this.props.name}</h2>
</div>
</h1>
<Child datas={datas1} />
<Child datas={datas2}/>
</div>;
}
});
// 子组件 ： 全局定义 或者是在 父组件内定义均可
// 父组件里有很多数据[比如head,content] 需要从 父组件（调用）传递给子组件（定义），
// 在这里加上组件模板
var Child = React.createClass({
render: function() {
// ES6 语法对象解购赋值，可在Raect 语句中直接使用 head ，cotent
let {head="", content=""} = this.props.datas;
return<div>
<h1>标题： {head}</h1>
<h2>内容 ：{content} </h2>
</div>;
}
});
// var data = "123";
// var name = "React";
ReactDOM.render(
<HelloReact/>,
document.getElementById('app')
);
</script>
</body>
</html>*注意: JS语句 写在Father组件中return [return 里是React语句]外面，在Father 组件的 render方法*里面
上面例子的demo：HelloReact 与 Child 组件是在同一文件(组件)内;外部引入呢？只要的Child部分代码 以外部文件引入则可，后续补充。
基于 react 的Java web 应用—— 组件复用（后续需更新）的更多相关文章
- 基于 React 封装的高德地图组件，帮助你轻松的接入地图到 React 项目中。
react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...
- RSuite 一个基于 React.js 的 Web 组件库
RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...
- java web 三大组件
JavaWeb三大组件 Servlet,Filter,Listener. Servlet Servlet的作用 在Java web b/s架构中,servlet扮演了重要的角色,作为一个中转处理的容器 ...
- java web(五):java web三大组件之另外两个和八大监听器
java的三大组件指Servlet.Filter.Listener.八大监听器指八个接口.前面介绍了Servlet,现在介绍一下Filter拦截器以及拦截地址的设置, Listener监听那些事件. ...
- 基于SSM的Java Web应用开发原理初探
SSM开发Web的框架已经很成熟了,成熟得以至于有点落后了.虽然如今是SOA架构大行其道,微服务铺天盖地的时代,不过因为仍有大量的企业开发依赖于SSM,本文简单对基于SSM的Java开发做一快速入门, ...
- java Web三大组件--过滤器
参考博客:http://www.cnblogs.com/coderland/p/5902878.html https://www.cnblogs.com/HigginCui/p/5772514.htm ...
- Java Web三大组件之过滤器（Filter）
什么是过滤器?有什么用? 过滤器JavaWeb三大组件之一,它与Servlet很相似.不过滤器是用来拦截请求的,而不是处理请求的.过滤,顾名思义,就是留下我们想要的,丢掉我们不需要的.例如:某个网站的 ...
- java Web三大组件--监听器
监听器概述 监听器(Listener)是一种特殊的Servlet技术,它可以监听Web应用的上下文信息.Servlet请求信息和Servlet会话信息,即ServletContext.ServletR ...
- java web多组件协作实现用户登录验证
实现步骤: 1.创建用户登录提交界面 2.创建处理用户登录请求servlet组件Main 3.创建代表登录成功响应的servlet的组件LoginSuccess 4.创建代表登录失败响应的servle ...
随机推荐
- Blocked Billboard II题解--模拟到崩溃的模拟
前言 比赛真的状态不好(腐了一小会),导致差点爆0. 这个题解真的是在非常非常专注下写出来的,要不然真的心态崩. 题目 题目描述 奶牛Bassie想要覆盖一大块广告牌,她在之前已经覆盖了一小部分广告牌 ...
- 【php】PDO
一.PDO的定义 1.pdo(php data object)是一个数据库的抽象层 二.PDO的特点 1.跨数据库 2.支持预处理 3.支持事务处理 三.PDO的使用 1.基本使用 (1)实例化pdo ...
- Hadoop（二）搭建Hadoop
0.部署计划 本文使用的版本是 red hat 6.8 -本来想用Centos7搭建的,但是工作需要还是换成这个了,不用红帽子用Centos 6系列的应该也可以 JDK 1.8 Hadoop 2.7. ...
- Loop Unrolling 循环展开
在csapp第五章5.2中提到了循环展开(loop unrolling).这里展开一下为什么循环展开可以提升程序的效率. 以书中计算数组和的两段代码为例: 1.未展开: void psum1(floa ...
- [go]map基本使用和底层原理
1.map基本使用 map声明 var m4 map[int]int //只是声明 没有开辟空间 m4[1]=100 //报错 log.Println(m4) 创建 //1 m3:=make(map[ ...
- mysql> 12 simple but staple commands
Edit at: 2019-12-28 16:52:42 1.mysql -u+username -p+password --> connect mysql 2.use databasena ...
- GO中的channel使用小结
go关键字可以用来开启一个goroutine(协程))进行任务处理,而多个任务之间如果需要通信,就需要用到channel了. func testSimple(){ intChan := make(ch ...
- webWMS开发过程记录（五）- 详细设计之系统界面框架设计
界面区域划分 使用frameset分了上中下三个区域 上:显示系统名称和用户信息,以及一些提示信息(需通过Ajax定时更新提示信息),显示高度固定 中:再次使用frameset分成左右区域 左:显示导 ...
- .net批量更新(插入、修改、删除)数据库
思路: 1. 设置DataTable中每行的状态标识,即调用DataRow的方法setAdded().setModified().Delete() 2. 使用DataAdapter的Update(Da ...
- Python的深浅copy详解
Python的深浅copy详解 目录 Python的深浅copy详解 一.浅copy的原理 1.1 浅copy的定义 1.2 浅copy的方法 二.深copy的原理 2.1 深copy的定义 2.2 ...