Đặt câu hỏi và nhận tóm tắt tài liệu bằng cách tham chiếu trang này và nhà cung cấp AI bạn chọn
Lịch sử phiên bản
- "Tự động trang trí nội dung chèn"v8.0.018/1/2026
- "Khởi tạo lịch sử"v5.5.1029/6/2025
Nội dung của trang này đã được dịch bằng AI.
Xem phiên bản mới nhất của nội dung gốc bằng tiếng AnhIf you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy doc Markdown to clipboard
Nội Dung Chèn / Chèn trong Intlayer
Cách Thức Hoạt Động của Chèn
Trong Intlayer, nội dung chèn được thực hiện thông qua hàm insertion, hàm này xác định các trường chỗ giữ trong một chuỗi (chẳng hạn như {{name}} hoặc {{age}}) có thể được thay thế một cách động khi chạy. Cách tiếp cận này cho phép bạn tạo các chuỗi linh hoạt, giống như mẫu, trong đó các phần cụ thể của nội dung được xác định bởi dữ liệu được truyền từ ứng dụng của bạn.
Khi tích hợp với React Intlayer hoặc Next Intlayer, bạn chỉ cần cung cấp đối tượng dữ liệu chứa các giá trị cho từng chỗ giữ, và Intlayer sẽ tự động hiển thị nội dung với các chỗ giữ được thay thế.
Thiết Lập Nội Dung Chèn
Để thiết lập nội dung chèn trong dự án Intlayer của bạn, hãy tạo một module nội dung bao gồm các định nghĩa chèn của bạn.
Sử dụng hàm insert để khai báo nội dung chèn một cách rõ ràng.
Sử dụng Nội dung Chèn với React Intlayer
Sử dụng Nội dung Chèn với React Intlayer
Để sử dụng nội dung chèn trong một component React, hãy import và sử dụng hook useIntlayer từ package react-intlayer. Hook này lấy nội dung theo key được chỉ định và cho phép bạn truyền vào một đối tượng ánh xạ mỗi placeholder trong nội dung với giá trị bạn muốn hiển thị.
Sao chép mã vào clipboard
import type { FC } from "react";
import { useIntlayer } from "react-intlayer";
const InsertionComponent: FC = () => {
const { myInsertion } = useIntlayer("my_key");
return (
<div>
<p>
{
/* Kết quả: "Xin chào, tôi tên là John và tôi 30 tuổi!" */
myInsertion({ name: "John", age: "30" })
}
</p>
<p>
{
/* Bạn có thể tái sử dụng cùng một nội dung chèn với các giá trị khác nhau */
myInsertion({ name: "Alice", age: "25" })
}
</p>
</div>
);
};
export default InsertionComponent;Tài Nguyên Bổ Sung
Để biết thêm thông tin chi tiết về cấu hình và cách sử dụng, vui lòng tham khảo các tài nguyên sau:
Những tài nguyên này cung cấp thêm những hiểu biết sâu sắc về cách thiết lập và sử dụng Intlayer trên nhiều môi trường và framework khác nhau.