基于 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 ...
随机推荐
- 基于OAuth2.0的token无感知刷新
目前手头的vue项目关于权限一块有一个需求,其实架构师很早就要求我做了,但是由于这个紧急程度不是很高,最近临近项目上线,我才想起,于是赶紧补上这个功能.这个项目是基于OAuth2.0认证,需要在每个请 ...
- Shell:Day06.笔记
sed命令 Linux文本处理三剑客 之 sed sed stream EDite 作为行编辑器,对文本进行编辑(以行为单位进行编辑) 注意:sed编辑文件,却不改变原文件: sed的工作原理: ...
- Springboot2(二)通过微信熟悉熟悉Spring-boot yml配置文件
前言:Spring-boot的yml配置文件,这里就不在借助人.狗介绍了,试试套下微信! 创建yml文件 值得注意的是下图中有三种命名方法,前两种是对的,且第二种必须是横线而不是下划线! yml文件的 ...
- 修改linux服务器名称
临时修改: hostname test //退出shell,在进入即可修改成功 永久修改 CentOs: vi /etc/hostname //直接+名字即可 //Ubuntu 系统 /etc/hos ...
- 37.2 net-- tcp传输 ServerSocket、Socket
一.打开server端 package day35_net_网络编程.tcp传输; import java.io.IOException; import java.io.InputStream; im ...
- template_showpost
使用<a href='...'>name<\a>实现点击"name"与转向'...'网址的超链接操作 from django.shortcut import ...
- 四、华为VRP平台介绍和常用配置
一.华为VRP平台 华为现用的平台是VRP(Versatile Routing Platform)是华为公司数据通信产品的通用操作系统平台. 包含华为产品中的路由.交换.安全.无线等等 二.华为设备管 ...
- cxx signal信号捕获
kill -9 [pid] 该信号不能被捕获 #include <iostream> #include <csignal> static void vSignalHandler ...
- compareAndSet() 注意点
compareAndSet()与weakCompareAndSet()是有条件的修改程序的方法,这两个方法都要取用两个参数:在方法启动时预期数据所具有的的值,以及要把数据所设定成的值.它们都只会在变量 ...
- 数字电路技术之触发器（基本RS触发器）
一.触发器的知识 1.触发器是构成时序逻辑电路的基本逻辑部件. 2.[1]它有两个稳定的状态:0状态和1状态: [2]在不同的输入情况下,它可以被置成0状态或1状态: [3]当输入 ...