Spread operator là gì ?

Hiểu một cách đơn giản spread operator là nói đến cách sử dụng ký hiệu dấu ba chấm ...

để hiểu rõ hơn về spread operator các bạn có thể tham khảo ở đây

ở bài viết này mình muốn nói đến việc sử dụng Spread operator để truyền props nhé.

Trong một vài trường hợp bạn phải truyền rất nhiều props từ cha sang con trông nó như thế này .

const Post = () => {
 
    return (
        <Detail 
				title={'Ngày mưa..}
				content={'Hà nội hôm nay mưa to và nhiều sấm chớp...'}
				createdBy={'Thanh Nguyễn'}
				/>
    )
}

const Detail = ({ title, content, createdBy }) => {
    return (
       <div>
           <h1>{title}</h1>
           <p>{content}</p>
           <p>{createdBy}</p>
       </div>
    )
}

Bạn có thể thấy rằng props ở trong component Post có rất nhiều thuộc tính, thay vì ta viết hết vào component Detail thì ta có thể sử dụng Spread operato trông như thế này.

const Post = () => {
    const props = { title: 'Ngày mưa..', content: 'Hà nội hôm nay mưa to và nhiều sấm chớp...', createdBy: 'Thanh Nguyễn' };
    return (
        <Detail {...props} />
    )
}

const Detail = ({ title, content, createdBy }) => {
    return (
       <div>
           <h1>{title}</h1>
           <p>{content}</p>
           <p>{createdBy}</p>
       </div>
    )
}

Bây giờ bạn trông lại code có lẽ sẽ gọn hơn đúng ko.

Còn rất nhiều chức năng lợi hại mà Spread operato mang lại bạn hãy tìm hiểu thêm tại đây nhé .

Link:

1. https://dev.to/laurieontech/5-uses-for-the-spread-operator-b9i
2. https://javascript.plainenglish.io/8-ways-to-use-spread-operator-in-javascript-b66fcf016efe
3. https://viblo.asia/p/su-dung-spread-operator-trong-javascript-gDVK24welLj