- Build Applications with Meteor
- Dobrin Ganev
- 605字
- 2021-07-09 19:48:56
The ProductsContainer
In the following figure, we have a ProductsContainer as the top-level parent component connected to the data source:

The functionality of the ProductsContainer is to load all the products from the ProductsCollection and render a Product presentational component for each product item. As always, we pass the data down as props.
To access the data, we need to import both the collections from the shared directory.
We will read the data from ProductsCollection and, on a user action, we will insert, update, or delete an item in the CartCollection:
import React from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import {ProductsCollection} from '../../shared/collections/ProductsCollection';
import {CartCollection} from '../../shared/collections/CartCollection';
import Product from '../components/ProductComponent';
We also want to have a function for the user to add each product to the cart; the function is as follows:
class Products extends React.Component {
constructor(props) {
super(props);
this.onAddToCart = this.onAddToCart.bind(this);
}
Products is declared as a class component and, in its constructor method, we've added the onAddToCart function. The constructor is the best place where we can bind this event handler. Binding it there will bind it to this component's context. Anywhere in the component context, we can call it with this.onAddToCart.
When this function is called, we will insert the product passed as an argument to the CartCollection. Then, we simply alert the user that the product has been added to the cart. Note that the insert to the collection is synchronous:
onAddToCart(product){
CartCollection.insert({
'title' : product.title,
'price' : product.price,
'inventory' : product.inventory,
'quantity': 1
});
alert(product.title + ' added to your cart')
}
In the render() method, we render a child presentational component Product for each item in the array of products. We pass the data to each of the children as props so that each child can render it in the UI:
render() {
const { products } = this.props
return (
<div>
<h2>Product List</h2>
{products.map(product =>
<Product
title={product.title}
price={product.price}
quantity={product.inventory}
key={product._id}
onAddToCart={() => this.onAddToCart(product)}
/>
)}
</div>
)
}
The key={product._id} is an important part of React. The key is how React identifies which component has changes in order to re-render it. It is not optional if the component was generated from a list and should be unique for each item. In our case, we are getting the ID from the database collection. Each document of a collection has a unique ID ( _id).
onAddToCart={() => this.onAddToCart(product)}
Here, we passed a function to the child as a prop of type function. The presentational component is responsible for the user actions, such as clicking on a button, to add an item to the cart. The parent will take care of moving the data in and out of the database.
The separation of concerns in this example may seem like overkill, but it is important to understand how we can abstract components based on common functionality:
export default createContainer(() => {
return {
products: ProductsCollection.find({}).fetch()
};
}, Products);
At last, we export the Products component wrapped in a Meteor reactive container. Each time the data changes in the ProductsCollection, the ProductsContainer will re-render with the new prop's products.
All the Product component does is to display the data passed as props and render a button that has the onClick event. The onAddToCart function, which we also passed as a prop, will fire back each time users click on the button:
export default class Product extends React.Component {
render() {
const { price, inventory, title, onAddToCart } = this.props;
return (
<div>
<span> {title} - ${price} {inventory ? `Current inventory
${inventory}` : null} </span>
<button onClick={onAddToCart}>
Add To Cart
</button>
</div>)
}
}
Product.propTypes = {
price: PropTypes.number,
inventory: PropTypes.number,
title: PropTypes.string,
onAddToCart: PropTypes.func.isRequired
}
- PHP 從入門到項目實踐(超值版)
- 區塊鏈架構與實現:Cosmos詳解
- 我的第一本算法書
- Kotlin Standard Library Cookbook
- Easy Web Development with WaveMaker
- 軟件項目管理實用教程
- Hands-On GPU:Accelerated Computer Vision with OpenCV and CUDA
- Expert Data Visualization
- 編程數學
- C++從入門到精通(第5版)
- 編程與類型系統
- Mastering ArcGIS Enterprise Administration
- Troubleshooting Citrix XenApp?
- 愛上C語言:C KISS
- 嵌入式C編程實戰