Thành phần phản ứng

Các thành phần giống như các hàm trả về các phần tử HTML.

Thành phần phản ứng

Các thành phần là các đoạn mã độc lập và có thể tái sử dụng. Chúng phục vụ cùng mục đích như các hàm JavaScript nhưng hoạt động độc lập và trả về HTML.

Các thành phần có hai loại, thành phần Lớp và thành phần Hàm, trong hướng dẫn này chúng ta sẽ tập trung vào các thành phần Hàm.

Tạo thành phần đầu tiên của bạn

Khi tạo thành phần React, tên của thành phần PHẢI bắt đầu bằng chữ in hoa.

Thành phần lớp

Một thành phần lớp phải bao gồm câu lệnh extends React.Component . Câu lệnh này tạo ra sự kế thừa cho React.Component và cấp cho thành phần của bạn quyền truy cập vào các chức năng của React.Component.

Thành phần này cũng yêu cầu phương thức render() , phương thức này trả về HTML.

 class Car extends React.Component { render() { return <h2>Hi, I am a Car!</h2>; } }

Thành phần chức năng

Đây là ví dụ tương tự như trên, nhưng thay vào đó được tạo bằng thành phần Hàm.

Thành phần Hàm cũng trả về HTML và hoạt động giống như thành phần Lớp, nhưng các thành phần Hàm có thể được viết bằng cách sử dụng ít mã hơn, dễ hiểu hơn và sẽ được ưu tiên hơn trong hướng dẫn này.

 function Car() { return <h2>Hi, I am a Car!</h2>; } 

Kết xuất một thành phần

Bây giờ ứng dụng React của bạn có một thành phần tên là Car, trả về phần tử <h2> .

Để sử dụng thành phần này trong ứng dụng của bạn, hãy sử dụng cú pháp tương tự như HTML thông thường: <Car />

 const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Car />);

đạo cụ

Các thành phần có thể được truyền dưới dạng props , viết tắt của các thuộc tính.

Đạo cụ giống như các đối số của hàm và bạn gửi chúng vào thành phần dưới dạng thuộc tính.

Bạn sẽ tìm hiểu thêm về props trong chương tiếp theo.

 function Car(props) { return <h2>I am a {props.color} Car!</h2>; } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Car color="red"/>);

Thành phần trong Thành phần

Chúng ta có thể tham khảo các thành phần bên trong các thành phần khác:

 function Car() { return <h2>I am a Car!</h2>; } function Garage() { return ( <> <h1>Who lives in my Garage?</h1> <Car /> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Garage />);

Các thành phần trong tập tin

React chủ yếu là về việc sử dụng lại mã và bạn nên chia các thành phần của mình thành các tệp riêng biệt.

Để làm điều đó, hãy tạo một tệp mới có phần mở rộng tệp .js và đặt mã vào bên trong tệp đó:

 function Car() { return <h2>Hi, I am a Car!</h2>; } export default Car;

Để có thể sử dụng thành phần Ô tô, bạn phải nhập tệp vào ứng dụng của mình.

 import React from 'react'; import ReactDOM from 'react-dom/client'; import Car from './Car.js'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Car />);

chức năng (đạo cụ) {
  return <h2>Xin chào, tôi là {props.name</h2>;
}