基于 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 ...
随机推荐
- 创建一个tar备份包
创建一个tar备份包 2.1问题 本例要求使用tar工具完成以下备份任务: 创 ...
- 曹工说Redis源码（3）-- redis server 启动过程完整解析（中）
文章导航 Redis源码系列的初衷,是帮助我们更好地理解Redis,更懂Redis,而怎么才能懂,光看是不够的,建议跟着下面的这一篇,把环境搭建起来,后续可以自己阅读源码,或者跟着我这边一起阅读.由于 ...
- 【php】面向对象（四）
知识点:ai一. a => abstract(抽象类) a) 抽象类的修饰符,修饰类和成员方法 b) 注意:被修饰的类不能被实例化,被修饰的方法不能有程序体 c) 如果某一个类使用abstrac ...
- (js描述的)数据结构[树结构1.2](12）
1.先序遍历 2.中序遍历 3.后序遍历 4.递归调用栈详解: 详细见: https://zhuanlan.zhihu.com/p/24291978 5.删除节点操作分析: 5.代码封装 //封装二叉 ...
- Pytest系列（16）- 分布式测试插件之pytest-xdist的详细使用
如果你还想从头学起Pytest,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1690628.html 前言 平常我们功能测试用例非常多时 ...
- MODIS系列之NDVI（MOD13Q1）三：.jdk文件配置+MRT安装
MRT(MODIS Reprojection Tool)简介: MODIS的全称为中分辨率成像光谱仪(Moderate-Resolution Imaging Spectroradiometer),是搭 ...
- C语言实现双向链表
目前我们所学到的链表,无论是动态链表还是静态链表,表中各节点中都只包含一个指针(游标),且都统一指向直接后继节点,通常称这类链表为单向链表(或单链表). 虽然使用单链表能 100% 解决逻辑关系为 & ...
- NumPy学习1：基本概念
NumPy的数组类被称作 ndarray .通常被称作数组.注意numpy.array和标准Python库类array.array并不相同,后者只处理一维数组和提供少量功能.更多重要ndarray对象 ...
- hive常用函数六
cast 函数: 类型转换函数,cast(kbcount as int); case when: 条件判断,case when kbcount is not null and cast(kbcount ...
- 360众测考试 Drupal 漏洞 CVE-2018-7600 远程代码执行-复现
0x00 前言 昨天360众测遇到的一个题 今天自己搭环境复现一下,希望对大家有帮助 0x01 漏洞简介 Drupal是一个开源内容管理系统(CMS),全球超过100万个网站(包括政府,电子零售,企业 ...