如何在 react intl 中新建一行？

Question

我有一个问题 - 如何在 react intl 中创建一个新行？我把我的翻译放在文件中，如：

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

并使用 . 如何制作 2+ 行消息？

Answer 1

万一有人仍在寻找解决方案。

你可以使用\n和使用white-space: pre-line样式。

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

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

Answer 2

使用参数添加<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