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的更多相关文章

  1. Photon自定义加载Resource之外的资源

    PhotonNetwork.cs 结尾添加如下代码: #region >>> Photon自定义异步加载GameObject public delegate void CustomL ...

  2. [译] 关于 Angular 依赖注入你需要知道的

    如果你之前没有深入了解 Angular 依赖注入系统,那你现在可能认为 Angular 程序内的根注入器包含所有合并的服务提供商,每一个组件都有它自己的注入器,延迟加载模块有它自己的注入器. 但是,仅 ...

  3. 桌面应用开发之WPF页面导航

    先看效果图 Get Start   为了项目解耦,使用mvvmlight框架.MVVM设计模式请自行了解. 1 新建项目   新建一个MvvmLight(WPF)项目,删除其中无关文件夹:Design ...

  4. java的图形界面初学惯用

    1.单一界面的创建 public void mainFrame() { HashMap<String, Component> views = new HashMap<String, ...

  5. WPF MvvmLight简单实例(1) 页面导航

    原文:WPF MvvmLight简单实例(1) 页面导航 实现了那些功能,先看看截图: 操作描述: 在程序运行后,点击“Load”按钮,页面会加载PageOne,点击PageOne页面中的“Next” ...

  6. 浅入深出Vue:自动化路由

    在软件开发的过程中,"自动化"这个词出现的频率是比较高的.自动化测试,自动化数据映射以及各式的代码生成器.这些词语的背后,也说明了在软件开发的过程中,对于那些重复.千篇一律的事情. ...

  7. [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 ...

  8. 国产深度学习框架mindspore-1.3.0 gpu版本无法进行源码编译

    官网地址: https://www.mindspore.cn/install 所有依赖环境 进行sudo make install 安装,最终报错: 错误记录信息: cat     /tmp/mind ...

  9. [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 ...

随机推荐

  1. css样式积累

    1.圆角:     border-radius:16px 16px 16px 16px;     2透明度:             filter: alpha(opacity=80);       ...

  2. C++最后课程项目总结

    第一次独立完成的C++小项目,40小时 + 5小时Update + 8小时Linux移植. 过程: 过程非常认真,一个星期主要就是忙这个,为了完成某个部分,有时饭都推迟吃,连续对着电脑10几个小时很累 ...

  3. grunt live

    { "name": "grunt-live-test", "version": "0.1.0", "autho ...

  4. .htaccess内容

    <IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On RewriteCond %{REQUEST_FILENA ...

  5. PHP面向对象(OOP):.static和const关键字的使用(self::)

    static关键字是在类中描述成员属性和成员方法是静态的:静态的成员好 处在哪里呢?前面我们声明了“Person”的人类,在“Person”这个类里如果我们加上一个“人所属国家”的属性,这样用“Per ...

  6. 如何在search中动态的显示和隐藏tree中的字段

    在tree定义 invisible 来自context <field name="country_id" invisible="context.get('invis ...

  7. linux c数据库备份第一版

    使用linuxC实现的mysql数据库备份目标:通过alarm信号定时备份数据库备注:目前是第一个版,本身不能定时备份可以结合linux自动化实现定时备份.运行平台:Linux或类unix测试平台:u ...

  8. find_cmd函数分析

    一.概述 1.函数位置 common/command.c 2.函数功能分析 解析命令的关键环节是如何根据输入命令查找对应命令的信息,从而跳转到对应命令的函数处执行程序.这必然涉及到如何存放命令的详细信 ...

  9. uboot的jumptable_init函数分析

    一.函数说明 函数功能:安装系统函数指针 函数位置:common/exports.c 二.函数分析 void jumptable_init (void) { int i; gd->jt = (v ...

  10. TCP/IP 三次握手和四次握手

    三次握手建立连接: 第一次握手:客户端发送syn包(seq=x)到服务器,并进入SYN_SEND状态,等待服务器确认: 第二次握手:服务器收到syn包,必须确认客户的SYN(ack=x+1),同时自己 ...