接收有关即将发布的Intlayer的通知
    Creation:2024-08-11Last update:2025-06-29

    函数获取

    Intlayer 允许您在内容模块中声明内容函数,这些函数可以是同步的也可以是异步的。当应用程序构建时,Intlayer 会执行这些函数以获取函数的结果。返回值必须是一个 JSON 对象或简单值,如字符串或数字。

    警告:函数获取当前不支持 JSON 内容声明和远程内容声明文件。

    函数声明

    以下是一个简单的同步函数获取内容的示例:

    **/*.content.ts
    import type { Dictionary } from "intlayer";const functionContent = {  key: "function_content",  content: {    text: () => "这是由函数渲染的内容",  },} satisfies Dictionary;export default functionContent;

    在此示例中,text 键包含一个返回字符串的函数。您可以使用 Intlayer 的解释器包(如 react-intlayer)在您的 React 组件中渲染此内容。

    异步函数获取

    除了同步函数外,Intlayer 还支持异步函数,允许您从外部来源获取数据或使用模拟数据来模拟数据检索。

    下面是一个模拟服务器获取的异步函数示例:

    **/*.content.ts
    import { setTimeout } from "node:timers/promises";import type { Dictionary } from "intlayer";const fakeFetch = async (): Promise<string> => {  // 等待200毫秒以模拟从服务器获取数据  return await setTimeout(200).then(() => "这是从服务器获取的内容");};const asyncFunctionContent = {  key: "async_function",  content: { text: fakeFetch },} satisfies Dictionary;export default asyncFunctionContent;

    在这种情况下,fakeFetch 函数模拟了一个延迟以模拟服务器响应时间。Intlayer 会执行异步函数,并将结果用作 text 键的内容。

    在 React 组件中使用基于函数的内容

    要在 React 组件中使用基于函数的内容,您需要从 react-intlayer 导入 useIntlayer,并使用内容 ID 调用它以获取内容。示例如下:

    **/*.jsx
    import type { FC } from "react";import { useIntlayer } from "react-intlayer";const MyComponent: FC = () => {  const functionContent = useIntlayer("function_content");  const asyncFunctionContent = useIntlayer("async_function_content");  return (    <div>      <p>{functionContent.text}</p>      {/* 输出:这是由函数渲染的内容 */}      <p>{asyncFunctionContent.text}</p>      {/* 输出:这是从服务器获取的内容 */}    </div>  );};export default MyComponent;

    在这种情况下,fakeFetch 函数模拟了延迟以模拟服务器响应时间。Intlayer 执行异步函数并使用结果作为 text 键的内容。

    在 React 组件中使用基于函数的内容

    要在 React 组件中使用基于函数的内容,您需要从 react-intlayer 导入 useIntlayer 并使用内容 ID 调用它以获取内容。示例如下:

    **/*.jsx
    import type { FC } from "react";import { useIntlayer } from "react-intlayer";const MyComponent: FC = () => {  const functionContent = useIntlayer("function_content");  const asyncFunctionContent = useIntlayer("async_function_content");  return (    <div>      <p>{functionContent.text}</p>      {/* 输出:这是由函数渲染的内容 */}      <p>{asyncFunctionContent.text}</p>      {/* 输出:这是从服务器获取的内容 */}    </div>  );};export default MyComponent;

    文档历史

    • 5.5.10 - 2025-06-29:初始化历史
    接收有关即将发布的Intlayer的通知