Learn React
Describing the UI

JavaScript trong JSX với dấu ngoặc nhọn

JSX cho phép bạn viết mã đánh dấu giống như HTML bên trong một tệp JavaScript, giúp giữ logic hiển thị và nội dung ở cùng một nơi. Đôi khi, bạn sẽ muốn thêm một chút logic JavaScript hoặc tham chiếu đến một thuộc tính động bên trong đoạn mã đánh dấu đó. Trong trường hợp này, bạn có thể sử dụng dấu ngoặc nhọn trong JSX để mở ra một “cửa sổ” tới JavaScript.

Bạn sẽ được học

  • Cách truyền chuỗi với dấu ngoặc kép hoặc dấu nháy
  • Cách tham chiếu biến JavaScript bên trong JSX bằng dấu ngoặc nhọn
  • Cách gọi hàm JavaScript bên trong JSX bằng dấu ngoặc nhọn
  • Cách sử dụng đối tượng JavaScript bên trong JSX bằng dấu ngoặc nhọn

Truyền chuỗi với dấu ngoặc kép hoặc dấu nháy

Khi bạn muốn truyền một thuộc tính chuỗi vào JSX, bạn đặt nó trong dấu nháy đơn hoặc dấu nháy kép:

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

Ở đây, "https://i.imgur.com/7vQD0fPs.jpg" và "Gregorio Y. Zara" đang được truyền như các chuỗi.

Nhưng nếu bạn muốn chỉ định thuộc tính src hoặc văn bản alt một cách linh động thì sao? Bạn có thể sử dụng một giá trị từ JavaScript bằng cách thay thế " và " bằng dấu { và }:

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

Chú ý sự khác biệt giữa className="avatar", chỉ định tên lớp CSS "avatar" để làm tròn hình ảnh, và src={avatar} đọc giá trị của biến JavaScript có tên là avatar. Đó là vì dấu ngoặc nhọn cho phép bạn làm việc với JavaScript ngay trong mã đánh dấu của mình!

Sử dụng dấu ngoặc nhọn: Một cửa sổ vào thế giới JavaScript

JSX là một cách đặc biệt để viết JavaScript. Điều đó có nghĩa là bạn có thể sử dụng JavaScript bên trong nó—với dấu ngoặc nhọn { }. Ví dụ dưới đây đầu tiên khai báo một tên cho nhà khoa học, name, sau đó nhúng nó vào bên trong dấu ngoặc nhọn trong thẻ <h1>:

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

Thử thay đổi giá trị của biến name từ 'Gregorio Y. Zara' thành 'Hedy Lamarr'. Hãy xem cách tiêu đề danh sách thay đổi?

Bất kỳ biểu thức JavaScript nào cũng sẽ hoạt động giữa dấu ngoặc nhọn, bao gồm cả các lời gọi hàm như formatDate():

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

Nơi để sử dụng dấu ngoặc nhọn

Bạn chỉ có thể sử dụng dấu ngoặc nhọn theo hai cách trong JSX:

  1. Dưới dạng văn bản trực tiếp bên trong một thẻ JSX: <h1>{name}'s To Do List</h1> hoạt động, nhưng <{tag}>Gregorio Y. Zara's To Do List</{tag}> sẽ không hoạt động.
  2. Dưới dạng các thuộc tính ngay sau dấu =: src={avatar} sẽ đọc giá trị của biến avatar, nhưng src="{avatar}" sẽ truyền chuỗi "{avatar}".

Sử dụng “hai dấu ngoặc nhọn”: CSS và các đối tượng khác trong JSX

Ngoài chuỗi, số và các biểu thức JavaScript khác, bạn thậm chí có thể truyền các đối tượng trong JSX. Các đối tượng cũng được biểu thị bằng dấu ngoặc nhọn, như { name: "Hedy Lamarr", inventions: 5 }. Do đó, để truyền một đối tượng JavaScript trong JSX, bạn phải bao đối tượng đó trong một cặp dấu ngoặc nhọn khác: person={{ name: "Hedy Lamarr", inventions: 5 }}.

Bạn có thể thấy điều này khi sử dụng kiểu CSS nội tuyến (inline) trong JSX. React không bắt buộc bạn phải sử dụng kiểu nội tuyến (các lớp CSS hoạt động rất tốt trong hầu hết các trường hợp). Nhưng khi bạn cần kiểu nội tuyến, bạn truyền một đối tượng vào thuộc tính style:

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

Thử thay đổi giá trị của backgroundColor và color.

Bạn có thể thật sự thấy đối tượng JavaScript bên trong dấu ngoặc nhọn khi bạn viết nó như thế này:

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

Lần kế tiếp bạn thấy {{ và }} trong JSX, hãy biết rằng đó chỉ đơn giản là một đối tượng bên trong dấu ngoặc nhọn của JSX!

Chú Ý

Các thuộc tính style nội tuyến (inline) được viết theo kiểu camelCase. Ví dụ, HTML <ul style="background-color: black"> sẽ được viết là <ul style={{ backgroundColor: 'black' }}> trong component của bạn.

Thêm nhiều điều thú vị với các đối tượng JavaScript và dấu ngoặc nhọn

Bạn có thể gom nhiều biểu thức vào một đối tượng và tham chiếu chúng trong JSX bằng dấu ngoặc nhọn:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

Trong ví dụ này, đối tượng JavaScript person chứa một chuỗi name và một đối tượng (object) theme:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

Component có thể sử dụng những giá trị này từ person như sau:

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

JSX là một ngôn ngữ mẫu (templating language) rất tối giản vì nó cho phép bạn tổ chức dữ liệu và logic bằng JavaScript.

Tóm tắt

Bây giờ bạn đã biết gần như mọi thứ về JSX:

  • Các thuộc tính JSX đặt trong dấu ngoặc kép sẽ được truyền dưới dạng chuỗi.
  • Dấu ngoặc nhọn cho phép bạn đưa logic JavaScript và các biến vào trong mã đánh dấu của mình.
  • Chúng hoạt động bên trong nội dung thẻ JSX hoặc ngay sau dấu = trong các thuộc tính.
  • Dấu {{ và }} không phải là cú pháp đặc biệt: Đó là một đối tượng JavaScript được đặt bên trong dấu ngoặc nhọn JSX.

Try out some challenges

Challenge 1 of 3:
Sửa lỗi

Mã này gặp sự cố với lỗi nói rằng Objects are not valid as a React child (Đối tượng không hợp lệ khi làm con của React.):

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

Bạn có thể tìm ra vấn đề?

PreviousWriting Markup with JSX
NextPassing Props to a Component