[Flux] Component / Views
Component Views Flux
2023-09-14 09:00:54 时间
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> ) }
相关文章
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- [Angular Unit Testing] Testing Component methods
- [Vue] Dynamic Vue.js Components with the component element
- [Angular Testing] Unit Testing -- Test component and service.
- [React] Preview and edit a component live with React Live
- [Vue @Component] Switch Between Vue Components with Dynamic Components
- [HTML5] Accessibility Implementation for complex component
- [Angular & Unit Testing] Testing Component with Store
- [Angular Testing] Unit Testing -- Test component and service.
- Component Configuration.js - 所有支持属性列表 - configuration priority
- SAP Spartacus B2B页面的List Component
- Object component的各种标识符