[Flux] Component / Views
The application will dislay a some catalogs, and each catalog has title image, description.
Catalog:
import React from 'react';
import AppStore from '../stores/app-store';
import CatalogItem from './app-catalogitem'; function getCatalog(){
return { items: AppStore.getCatalog() }
} class Catalog extends React.Component {
constructor(){
super();
this.state = getCatalog()
}
render(){
let items = this.state.items.map( item => {
return <CatalogItem key={ item.id } item={ item } />
});
return (
<div className="row">
{ items }
</div>
)
}
}
export default Catalog;
Each Catalog render CatalogItem:
import React from 'react';
import AppActions from '../actions/app-actions';
import CartButton from './app-cart-button'; export default (props) => {
return (
<div className="col-xs-6 col-sm-4 col-md-3">
<h4>{ props.item.title }</h4>
<img src="http://placehold.it/250x250" width="100%" className="img-responsive"/>
<p>{ props.item.summary }</p>
<p>${ props.item.cost }</p>
<CartButton
handler={
AppActions.addItem.bind(null, props.item)
}
txt="Add To Cart"
/>
</div>
)
}
CartButton handle the click event whcih passed in:
import React from 'react'; export default (props) => {
return (
<button
className="btn btn-default btn-sm"
onClick={ props.handler }>
{ props.txt }
</button>
)
}
[Flux] Component / Views的更多相关文章
- Photon自定义加载Resource之外的资源
PhotonNetwork.cs 结尾添加如下代码: #region >>> Photon自定义异步加载GameObject public delegate void CustomL ...
- [译] 关于 Angular 依赖注入你需要知道的
如果你之前没有深入了解 Angular 依赖注入系统,那你现在可能认为 Angular 程序内的根注入器包含所有合并的服务提供商,每一个组件都有它自己的注入器,延迟加载模块有它自己的注入器. 但是,仅 ...
- 桌面应用开发之WPF页面导航
先看效果图 Get Start 为了项目解耦,使用mvvmlight框架.MVVM设计模式请自行了解. 1 新建项目 新建一个MvvmLight(WPF)项目,删除其中无关文件夹:Design ...
- java的图形界面初学惯用
1.单一界面的创建 public void mainFrame() { HashMap<String, Component> views = new HashMap<String, ...
- WPF MvvmLight简单实例(1) 页面导航
原文:WPF MvvmLight简单实例(1) 页面导航 实现了那些功能,先看看截图: 操作描述: 在程序运行后,点击“Load”按钮,页面会加载PageOne,点击PageOne页面中的“Next” ...
- 浅入深出Vue:自动化路由
在软件开发的过程中,"自动化"这个词出现的频率是比较高的.自动化测试,自动化数据映射以及各式的代码生成器.这些词语的背后,也说明了在软件开发的过程中,对于那些重复.千篇一律的事情. ...
- [codeigniter4]Upgrading from 3.x to 4.x
CodeIgniter 4 is a rewrite of the framework, and is not backwards compatible. It is more appropriate ...
- 国产深度学习框架mindspore-1.3.0 gpu版本无法进行源码编译
官网地址: https://www.mindspore.cn/install 所有依赖环境 进行sudo make install 安装,最终报错: 错误记录信息: cat /tmp/mind ...
- [Vue warn]: Unknown custom element: <sapn> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <Evaluate> at src/views/index/
关于vue报错: [Vue warn]: Unknown custom element: <sapn> - did you register the component correctly ...
随机推荐
- css样式积累
1.圆角: border-radius:16px 16px 16px 16px; 2透明度: filter: alpha(opacity=80); ...
- C++最后课程项目总结
第一次独立完成的C++小项目,40小时 + 5小时Update + 8小时Linux移植. 过程: 过程非常认真,一个星期主要就是忙这个,为了完成某个部分,有时饭都推迟吃,连续对着电脑10几个小时很累 ...
- grunt live
{ "name": "grunt-live-test", "version": "0.1.0", "autho ...
- .htaccess内容
<IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On RewriteCond %{REQUEST_FILENA ...
- PHP面向对象(OOP):.static和const关键字的使用(self::)
static关键字是在类中描述成员属性和成员方法是静态的:静态的成员好 处在哪里呢?前面我们声明了“Person”的人类,在“Person”这个类里如果我们加上一个“人所属国家”的属性,这样用“Per ...
- 如何在search中动态的显示和隐藏tree中的字段
在tree定义 invisible 来自context <field name="country_id" invisible="context.get('invis ...
- linux c数据库备份第一版
使用linuxC实现的mysql数据库备份目标:通过alarm信号定时备份数据库备注:目前是第一个版,本身不能定时备份可以结合linux自动化实现定时备份.运行平台:Linux或类unix测试平台:u ...
- find_cmd函数分析
一.概述 1.函数位置 common/command.c 2.函数功能分析 解析命令的关键环节是如何根据输入命令查找对应命令的信息,从而跳转到对应命令的函数处执行程序.这必然涉及到如何存放命令的详细信 ...
- uboot的jumptable_init函数分析
一.函数说明 函数功能:安装系统函数指针 函数位置:common/exports.c 二.函数分析 void jumptable_init (void) { int i; gd->jt = (v ...
- TCP/IP 三次握手和四次握手
三次握手建立连接: 第一次握手:客户端发送syn包(seq=x)到服务器,并进入SYN_SEND状态,等待服务器确认: 第二次握手:服务器收到syn包,必须确认客户的SYN(ack=x+1),同时自己 ...