使用 fbs API 强制使用纯文本字符串

要点

• fbs 是 fbt JS API 的专门版本，仅用于表示可翻译的纯文本字符串
  • 它是 fbt 的一个子集，因为后者也可以表示富文本内容（例如文本和 React 组件的混合）
• 每当您想要强制翻译结果为纯字符串时，请使用 fbs。
  • 这通常对于 HTML 属性很有用，这些属性的值只能是纯文本字符串（例如 ARIA description）
• fbs 的翻译过程与常规 JS fbt 字符串相同

它是什么？

• fbs 表示可翻译的纯文本字符串
  • 它是 fbt 的一个子集，后者也可以表示富文本内容（即文本和 React 组件的混合）
• fbs 的意思是类似于“FB 字符串”，它不是真正的首字母缩略词。 😅

为什么要使用它？

• 强制使用仅可翻译的纯文本字符串，这对于以下情况很有用：
  • 编写可本地化的 HTML 属性，如 title、label、placeholder 等...
    • 为什么？因为这些 HTML 属性只期望一个字符串值；没有 HTML！
      • 请注意，如果您使用带有嵌入式任意 HTML/React 组件的 <fbt>，我们会删除内部文本，因此最终本地化的文本可能不完整！（有关更多信息，请参阅 onStringSerializationError 钩子）
  • 您需要强制执行相同约束的 React 组件或任何 JS 代码

如何使用它？

• 使用 fbs() 函数式 API （推荐）
  • 您仍然可以使用 <fbs> JSX API，但它的类型安全性较低，因为 Flow 引擎无法静态验证 <fbs:param> 的值是否对字符串友好。
• 支持所有现有的 fbt 构造。只需编写 fbs 而不是 fbt。
  • 例如，<fbt:param> 和 <fbs:param> 的工作方式相同。
  • 请参阅 单元测试文件中的示例
  • 🚨 重要提示：如果您将非字符串值传递给 <fbs:param>，我们最终会在客户端抛出 JS 异常。
• 如何提交翻译请求？
  • 请按照与常规 fbt 字符串相同的过程

React 中的示例

<>

<fbs desc="some desc">Hello world!</fbs>

<fbs desc="some desc">

Hello{' '}

<fbt:name name="name" gender={someGender}>

{name}

</fbt:name>

</fbs>

{fbs('Hello world!', 'description')} // you can use the functional style too

</>

常规 JS 中的示例

let myPlainTranslatedText = fbs('Hello world!', 'description');

myPlainTranslatedText = fbs(

[

'I have ',

fbs.plural('a dream', count, {

many: 'dreams',

showCount: 'yes',

}),

'.',

],

'desc',

);

// singular text = "I have a dream."

// plural text = "I have {number} dreams."

// make sure to call .toString() as close to the UI recipient as possible

document.title = myPlainTranslatedText.toString();

fbs 结果值在 JS 中返回什么？

• 调用 fbs() 或 <fbs> 后，您将收到一个 Fbs 值。
  • 更准确地说，它是 FbtPureStringResult 的一个实例
• fbs 值可以代替 fbt 值使用
  • const someFbt: Fbt = fbs(...) // is Flow valid
• fbt 值不能像预期的那样代替 fbs 值使用。
  • const plainText: Fbs = fbt(...) // Flow 类型无效

我的 React props 应该使用什么 Flow 类型？

使用 Fbs Flow 类型。

示例

type Props = {

title: Fbs,

};