基于 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 ...
随机推荐
- Prthon多线程和模块
Prthon多线程和模块 案例1:简化除法判断 案例2:分析apache访问日志 案例3:扫描存活主机 案例4:利用多线程实现ssh并发访问 1 案例1:简化除法判断 1.1 问题 编写mydiv.p ...
- Python Modules and Packages – An Introduction
This article explores Python modules and Python packages, two mechanisms that facilitate modular pro ...
- Matlab入门（二）
数据类型 1.整形 有符号 1 字节整数 -27 - 27-1 int8() 有符号 2 字节整数 -215 - 215-1 int16() 有符号 4 字节整数 -231 - 231-1 int32 ...
- Spring 中 用 ${xxx} 读取properties文件的说明
properties 如果在 spring 中通过 PropertyPlaceholderConfigurer 加载,当spring 中需要 用到 properties 中的一些 key 和value ...
- QMS产品 - MasterControl 质量管理活动
主要质量管理活动如下所示: CAPA 纠正措施/预防措施 Corrective Maintenance 纠正措施 Preventive Maintenance 预防措施 Customs Complai ...
- Daily Scrum 12/14/2015
Progress: Dong&Minlong: 基于Oxford Speech API成功实现语音输入的功能,但由于服务器存在访问次数的限制(每分钟6次),所以暂不准备将此功能加入ALPHA版 ...
- F - What Is Your Grade?
“Point, point, life of student!” This is a ballad(歌谣)well known in colleges, and you must care about ...
- JS Math&Date的方法 (上)
数学对象&时间对象 本篇文章主要介绍Math 和 Date 的常用方法! 一 :Math & Date Math 数学对象 - 处理数学计算和数学类 ...
- 详解 Arrays类
请关注本人博文--<详解 普通数组 -- Arrays类 与 浅克隆> Arrays类: 概述: 针对数组进行操作的工具类.它提供了对于数组的值的排序.查找等功能. 现在,本人来展示一下A ...
- 从零开始的计算机网络基础（图文并茂，1.8w字，面试复习必备）
前言 在互联网高速发展的今天,我们通过手机,电脑等通讯设备可以很轻松达到未出茅庐便知天下事的境界.每天我们都要访问数不胜数的网站,通过打开浏览器,输入网址两步搞定.当然更为常规的做法是打开浏览器,设置 ...