如何在React Intl中创建新行？

Question

我有一个问题-如何在React Intl中换行？ 我将我的翻译放在文件中，例如：

[LOCALES.ENGLISH]: {
        'hello': 'Hello',
        }

如何使用 . 来调用它们？怎样制作一个包含两行或以上内容的消息？

- Slava_Yarmolenko

Answer 1

使用参数添加<br/>标签：

const messages = {
  MESSAGE: {
    id: "message",
    defaultMessage: "<p>Message with {br} linebreaks</p>"
  }
};

export default function App() {
  return (
    <IntlProvider locale="en" messages={messages}>
      <div className="App">
        <FormattedMessage
          {...messages.MESSAGE}
          values={{
            p: (...chunks) => <p>{chunks}</p>,
            br: <br />
          }}
        />
      </div>
    </IntlProvider>
  );
}

完整沙箱: https://codesandbox.io/s/formattedmessage-key-error-6kx6c?file=/src/App.js

- terales

---

谢谢。有没有全局配置选项（可能在提供程序中）来代替在每个FormatMessage标记中进行配置？ - Mishhub Mohammed

Answer 2

如果有人仍在寻找解决方法，您可以使用 \n 并应用 white-space: pre-line 样式。

{'hello': 'Hello \n World'}

<p style="white-space: pre-line;"><FormattedMessage id="hello"/></p>

- Naren

Answer 3

您可以使用带有变量的消息，并将<br/>作为变量的值发送，如下所示：

    <FormattedMessage {...strings.headTitle} values={{br: <br/>}} />

字符串：

export default defineMessages({
  headTitle: {
    id: 'test',
    defaultMessage: 'test {br} next line',
  } })

- Ghazaleh Javaheri

Answer 4

从'react-html-parser'导入ReactHtmlparser;

在下面的类构造函数中添加super()之后 这.formatMessage = props.intl.formatMessage

并在你的jsx中使用

{ReactHtmlparser(this.formatMessage({id: "your id"}))}

export default injectIntl(MyClass);

- Arjun Garad

---

您的回答可以通过添加更多的支持信息来改善。请进行[编辑]以添加进一步的细节，如引用或文档，以便其他人可以确认您的答案是正确的。您可以在帮助中心中找到有关编写良好答案的更多信息。 - Community