createElement

const element = createElement(type, props, ...children)

• Tham khảo
  • createElement(type, props, ...children)
• Cách sử dụng
  • Tạo một phần tử mà không cần JSX

Tham khảo

createElement(type, props, ...children)

Gọi createElement để tạo một phần tử React với type, props và children đã cho.

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello'
  );
}

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

Tham số

• type: Đối số type phải là một kiểu component React hợp lệ. Ví dụ: nó có thể là một chuỗi tên thẻ (chẳng hạn như 'div' hoặc 'span'), hoặc một component React (một hàm, một class hoặc một component đặc biệt như Fragment).

• props: Đối số props phải là một đối tượng hoặc null. Nếu bạn truyền null, nó sẽ được coi như một đối tượng trống. React sẽ tạo một phần tử với các props khớp với props mà bạn đã truyền. Lưu ý rằng ref và key từ đối tượng props của bạn là đặc biệt và sẽ không khả dụng dưới dạng element.props.ref và element.props.key trên element được trả về. Chúng sẽ có sẵn dưới dạng element.ref và element.key.

• tùy chọn ...children: Không hoặc nhiều node con. Chúng có thể là bất kỳ node React nào, bao gồm các phần tử React, chuỗi, số, portal, các node trống (null, undefined, true và false) và mảng các node React.

Giá trị trả về

createElement trả về một đối tượng phần tử React với một vài thuộc tính:

• type: type bạn đã truyền.
• props: props bạn đã truyền ngoại trừ ref và key.
• ref: ref bạn đã truyền. Nếu thiếu, null.
• key: key bạn đã truyền, được ép thành một chuỗi. Nếu thiếu, null.

Thông thường, bạn sẽ trả về phần tử từ component của mình hoặc tạo nó thành một phần tử con của một phần tử khác. Mặc dù bạn có thể đọc các thuộc tính của phần tử, nhưng tốt nhất là coi mọi phần tử là không rõ ràng sau khi nó được tạo và chỉ hiển thị nó.

Lưu ý

• Bạn phải coi các phần tử React và các props của chúng là bất biến và không bao giờ thay đổi nội dung của chúng sau khi tạo. Trong quá trình phát triển, React sẽ đóng băng phần tử được trả về và thuộc tính props của nó một cách nông cạn để thực thi điều này.

• Khi bạn sử dụng JSX, bạn phải bắt đầu một thẻ bằng một chữ cái viết hoa để hiển thị component tùy chỉnh của riêng bạn. Nói cách khác, <Something /> tương đương với createElement(Something), nhưng <something /> (chữ thường) tương đương với createElement('something') (lưu ý nó là một chuỗi, vì vậy nó sẽ được coi là một thẻ HTML tích hợp).

• Bạn chỉ nên truyền children dưới dạng nhiều đối số cho createElement nếu tất cả chúng đều được biết tĩnh, như createElement('h1', {}, child1, child2, child3). Nếu children của bạn là động, hãy truyền toàn bộ mảng làm đối số thứ ba: createElement('ul', {}, listItems). Điều này đảm bảo rằng React sẽ cảnh báo bạn về việc thiếu key cho bất kỳ danh sách động nào. Đối với danh sách tĩnh, điều này là không cần thiết vì chúng không bao giờ sắp xếp lại.

Cách sử dụng

Tạo một phần tử mà không cần JSX

Nếu bạn không thích JSX hoặc không thể sử dụng nó trong dự án của mình, bạn có thể sử dụng createElement như một giải pháp thay thế.

Để tạo một phần tử mà không cần JSX, hãy gọi createElement với một type, props và children:

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello ',
    createElement('i', null, name),
    '. Welcome!'
  );
}

Các children là tùy chọn và bạn có thể truyền bao nhiêu tùy ý (ví dụ trên có ba children). Đoạn code này sẽ hiển thị một tiêu đề <h1> với lời chào. Để so sánh, đây là ví dụ tương tự được viết lại bằng JSX:

function Greeting({ name }) {
  return (
    <h1 className="greeting">
      Hello <i>{name}</i>. Welcome!
    </h1>
  );
}

Để hiển thị component React của riêng bạn, hãy truyền một hàm như Greeting làm type thay vì một chuỗi như 'h1':

export default function App() {
  return createElement(Greeting, { name: 'Taylor' });
}

Với JSX, nó sẽ trông như thế này:

export default function App() {
  return <Greeting name="Taylor" />;
}

Đây là một ví dụ hoàn chỉnh được viết bằng createElement:

Và đây là ví dụ tương tự được viết bằng JSX:

Cả hai kiểu code đều ổn, vì vậy bạn có thể sử dụng bất kỳ kiểu nào bạn thích cho dự án của mình. Lợi ích chính của việc sử dụng JSX so với createElement là dễ dàng nhận thấy thẻ đóng nào tương ứng với thẻ mở nào.

// Đơn giản hóa một chút
{
  type: Greeting,
  props: {
    name: 'Taylor'
  },
  key: null,
  ref: null,
}