Creation:2024-08-11Last update:2025-06-29
将此文档参考到您的 AI 助手ChatGPTClaudeDeepSeekGoogle AI modeGeminiPerplexityMistralGrok
使用您最喜欢的AI助手总结文档，并引用此页面和AI提供商
此页面的内容已使用 AI 翻译。
查看英文原文的最新版本编辑此文档
如果您有改善此文档的想法，请随时通过在GitHub上提交拉取请求来贡献。
文档的 GitHub 链接Copy
复制文档 Markdown 到剪贴板
函数获取
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;