Bộ phận PostList
Sau khi thực thi các bộ phận liên quan đến post khác, chúng ta bây giờ có thể thực thi bộ phận quan
trọng nhất của blog app của chúng ta, cung cấp các blog posts. Cho bây giờ, cung cấp đơn giản là
sẽ thể hiện một list các blog posts.
Hãy bắt đầu thực thi bộ phận PostList bây giờ:
1. Tạo một src/components/PostList.jsx file mới.
2. Trước tiên, chúng ta nhập khẩu bộ phận Fragment, PropTypes, và Post:
import { Fragment } from ‘react’
import PropTypes from ‘prop-types’
import { Post } from ‘./Post.jsx’
3. Sau đó, chúng ta định nghĩa bộ phận hàm PostList, chấp nhận một mảng posts như một prop. Nếu posts
không được định nghĩa, chúng ta thiết lập nó thành một mảng rỗng, theo mặc định:
export function PostList({ posts = [] }) {
4. Tiếp theo, chúng ta kết xuất tất cả các posts bằng cách sử dụng hàm .map và cú pháp spread:
Chúng ta trả về bộ phận <Post> cho mỗi post, và truyền tất cả các keys từ object post tới bộ phận như
các props. Chúng ta làm cái này bằng cách sử dụng cú pháp spread, cái có cùng hiệu ứng như liệt kê
tất cả các keys từ object thủ công như các props, giống như vậy:
<Post
title={post.title}
author={post.author}
contents={post.contents}/>