函数获取
函数声明
Intlayer 允许您在内容模块中声明内容函数，这些函数可以是同步的或异步的。当应用程序构建时，Intlayer 执行这些函数以获取函数的结果。返回值必须是一个 JSON 对象或一个简单的值，比如字符串或数字。
以下是一个简单的同步函数获取内容的示例：
typescript
1import type { DeclarationContent } from "intlayer";
2
3const functionContent = {
4 key: "function_content",
5 content: {
6 text: () => "这是由函数渲染的内容",
7 },
8} satisfies DeclarationContent;
9
10export default functionContent;在这个例子中，text 键包含一个返回字符串的函数。您可以使用 Intlayer 的解释器包，如 react-intlayer 在组件中渲染这些内容。
异步函数获取
除了同步函数外，Intlayer 还支持异步函数，允许您从外部源获取数据或使用模拟数据模拟数据检索。
下面是一个模拟服务器获取的异步函数示例：
typescript
1import { setTimeout } from "node:timers/promises";
2import type { DeclarationContent } from "intlayer";
3
4const fakeFetch = async (): Promise<string> => {
5 // 等待 200 毫秒以模拟从服务器获取
6 return await setTimeout(200).then(() => "这是从服务器获取的内容");
7};
8
9const asyncFunctionContent = {
10 key: "async_function",
11 content: { text: fakeFetch },
12} satisfies DeclarationContent;
13
14export default asyncFunctionContent;在这种情况下，fakeFetch 函数模拟了一种延迟，以模拟服务器响应时间。Intlayer 执行异步函数并使用结果作为 text 键的内容。
在 React 组件中使用基于函数的内容
要在 React 组件中使用基于函数的内容，您需要从 react-intlayer 导入 useIntlayer 并使用内容 ID 调用它以检索内容。以下是一个示例：
javascript
1import { useIntlayer } from "react-intlayer";
2
3const MyComponent = () => {
4 const functionContent = useIntlayer("function_content");
5 const asyncFunctionContent = useIntlayer("async_function_content");
6
7 return (
8 <div>
9 <p>{functionContent.text}</p>
10 {/* 输出：这是由函数渲染的内容 */}
11 <p>{asyncFunctionContent.text}</p>
12 {/* 输出：这是从服务器获取的内容 */}
13 </div>
14 );
15};
16
17export default MyComponent;如果您有改善此文档的想法，请随时通过在GitHub上提交拉取请求来贡献。
文档的 GitHub 链接