如果值为空，React-intl 将忽略指定的文本

Question

如何有条件地删除消息中周围的文本和空格（或者不包含）？让我们使用文档中的示例。

<FormattedMessage
  id="app.greeting"
  description="Greeting to welcome the user to the app"
  defaultMessage="Hello, {name}!"
  values={{
    name: 'Eric',
  }}  
/>

如果你想得到一个刚刚说 'Hello!' 的版本，因为用户忘记填写名字。你会在语言文件中定义一条新消息吗？然后评估名称变量是否为空/未定义？我花了几个小时试图找到解决方案，但无济于事。

在我的例子中，我有大约 3 个被注入的变量，所有这些变量都可以是未定义的，因为用户一步一步地填充数据。它只需要稍微不同的格式，具体取决于哪些已定义，哪些未定义。必须评估所有组合，然后在 lang 文件中定义它们，这似乎是一件令人头疼的事情。

Answer 1

是的，“直接”方法是使用单独的文本。

“你好！”与“Hello, Eric!”不同。

此外，想象一下在其他一些语言中，甚至可能有不同的词表示“你好......”后跟一个名字，以及一个独立的“你好”没有名字。

您可以提取例如一个 <Greeting /> 组件，包括条件，或者在这种情况下使用 imperative API intl.formatMessage 可能更容易，再次可能分离代码的某些部分。

如果值为空，React-intl 将忽略指定的文本

React-intl omit specified text if value is null

javascript

reactjs

react-intl