Built-in browser <title> component cho phép bạn chỉ định tiêu đề của tài liệu.

<title>My Blog</title>

Tham khảo

<title>

Để chỉ định tiêu đề của tài liệu, hãy render built-in browser <title> component. Bạn có thể render <title> từ bất kỳ component nào và React sẽ luôn đặt DOM element tương ứng vào document head.

<title>My Blog</title>

Xem thêm các ví dụ bên dưới.

Props

<title> hỗ trợ tất cả common element props.

  • children: <title> chỉ chấp nhận text làm child. Text này sẽ trở thành tiêu đề của tài liệu. Bạn cũng có thể truyền các component của riêng bạn miễn là chúng chỉ render text.

Special rendering behavior

React sẽ luôn đặt DOM element tương ứng với component <title> vào bên trong <head> của tài liệu, bất kể nó được render ở đâu trong React tree. <head> là vị trí hợp lệ duy nhất cho <title> tồn tại trong DOM, tuy nhiên, sẽ rất tiện lợi và giữ cho mọi thứ có thể kết hợp được nếu một component đại diện cho một trang cụ thể có thể tự render <title> của nó.

Có hai ngoại lệ cho điều này:

  • Nếu <title> nằm trong một component <svg>, thì sẽ không có hành vi đặc biệt nào, vì trong ngữ cảnh này, nó không đại diện cho tiêu đề của tài liệu mà là một accessibility annotation cho SVG graphic đó.
  • Nếu <title> có một itemProp prop, thì sẽ không có hành vi đặc biệt nào, vì trong trường hợp này, nó không đại diện cho tiêu đề của tài liệu mà là metadata về một phần cụ thể của trang.

Chú Ý

Chỉ render một <title> tại một thời điểm. Nếu nhiều hơn một component render một thẻ <title> cùng một lúc, React sẽ đặt tất cả các tiêu đề đó vào document head. Khi điều này xảy ra, hành vi của trình duyệt và công cụ tìm kiếm là không xác định.

Cách sử dụng

Đặt tiêu đề tài liệu

Render component <title> từ bất kỳ component nào với text làm children của nó. React sẽ đặt một <title> DOM node trong document <head>.

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function ContactUsPage() {
  return (
    <ShowRenderedHTML>
      <title>My Site: Contact Us</title>
      <h1>Contact Us</h1>
      <p>Email us at support@example.com</p>
    </ShowRenderedHTML>
  );
}

Sử dụng biến trong tiêu đề

Children của component <title> phải là một chuỗi text duy nhất. (Hoặc một số duy nhất hoặc một đối tượng duy nhất có phương thức toString.) Có vẻ không rõ ràng, nhưng sử dụng dấu ngoặc nhọn JSX như thế này:

<title>Results page {pageNumber}</title> // 🔴 Vấn đề: Đây không phải là một chuỗi duy nhất

… thực sự khiến component <title> nhận được một mảng hai phần tử làm children của nó (chuỗi "Results page" và giá trị của pageNumber). Điều này sẽ gây ra lỗi. Thay vào đó, hãy sử dụng string interpolation để truyền cho <title> một chuỗi duy nhất:

<title>{`Results page ${pageNumber}`}</title>
Previous<style>
NextAPIs