时间戳

首页 > 解决方案 > 如何在 React intl 中创建新行？

javascript - 如何在 React intl 中创建新行？

问题描述

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

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

并使用 . 如何制作 2 行以上的消息？

标签： javascriptreact-nativeinternationalization

解决方案

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

推荐阅读