reactjs - 使用 Webpack 1 构建时从react-intl消息渲染反斜杠

Question

摘要

When I load my app using Webpack Dev Server, my messages show up fine: \. However when I bundle the application to disk and server the bundle via nginx, I see a duplication of my backslash: \\.

详细信息

我正在使用 react-intl@2.2.3 (目前最新)和 babel-plugin-react-intl@2.3.1 (目前最新) .) 我的目标是使用 \ 字符定义默认消息并以任何方式呈现它(FormattedMessage、formatMessage 等)

我正在使用 Webpack/Babel 捆绑我的应用程序。我的 webpack.config.js 文件中没有 Babel/react-intl 特定配置，但我确实使用 DefinePlugin 来设置 process.env到'开发'或'生产'

当我使用 Webpack Dev Server 加载应用程序时，我的消息显示正常:\。然而，当我将应用程序捆绑到磁盘并通过 nginx 提供该 bundle 时，我看到了重复的反斜杠:\\。我这里有以下说明:https://github.com/yahoo/babel-plugin-react-intl/issues/13#issuecomment-151944191关于使用 4 个 \ 字符来显示最后一个 \ 字符。

就其值(value)而言，我尝试过使用 JSX 字符串、JS 字符串、使用 1、2 和 4 个 \ 字符，以及我能想到的任何其他愚蠢的组合。

非常感谢任何提示或建议。谢谢。

代码示例

如何定义消息的示例

import { defineMessages } from 'react-intl'


export default defineMessages({
  message: {
    id: 'anyId',
    defaultMessage: '\\\\',
  },
})

如何呈现消息的示例

<FormattedMessage { ...messages.anyID } /></span>

另一个例子，同样不起作用

<FormattedMessage id='anyId' defaultMessage='\\' />

另一个失败的例子:

<FormattedMessage id='anyId' defaultMessage={ '\\\\' } />

Answer 1

使用 unicode 字符而不是实际的反斜杠。反斜杠 unicode 为 \u005C。所以渲染一个反斜杠看起来像这样:

    export default defineMessages({
        message: {
            id: 'anyId',
            defaultMessage: '\u005C',
        },
    })

或者如果您想连续渲染两个反斜杠:

    export default defineMessages({
        message: {
            id: 'anyId',
            defaultMessage: '\u005C\u005C',
        },
    })

如果你刚刚完成了它，或者这个;)

    export default defineMessages({
        message: {
            id: 'anyId',
            defaultMessage: '¯\u005C_(ツ)_/¯',
        },
    })

最后的代码将呈现:¯\_(ツ)_/¯