如何在React Intl中添加链接到格式化消息?

时间:2019-08-22 08:43:23

标签: reactjs react-intl

我正在使用react intl ^ 2.4.0版本。我想在格式消息中添加链接,该消息也将被翻译。我正在与结合使用 react cookie law

我试图使用类似的东西:

const link = <a href="google.com">log in</a>;
const msg = `this website uses cookies ${link}`

但是没有运气。

const cookieMsg = (
    <FormattedMessage
        id="text"
        defaultMessage="This website uses cookies LINK HERE."
    />
);

并在CookieBanner中:

<IntlProvider locale={lang} messages={messages[lang]}>
    <>
        <CookieBanner
            message={msg}
            ...
        />
    </>
</IntlProvider>

直接在app.js中渲染。在这里:

<CookieBanner
     message={cookieMsg}
     acceptButtonText={cookieBtn}
     privacyPolicyLinkText={cookiePrivacy}
     policyLink="https://www.google.com"
     showMarketingOption={false}
     showStatisticsOption={false}
     showPreferencesOption={false}
     styles={{
              optionWrapper: {
                  display: "none"
               }
            }}
     />

1 个答案:

答案 0 :(得分:1)

您可以将链接作为值传递给FormattedMessage

const cookieMsg = (
    <FormattedMessage
        id="text"
        defaultMessage="This website uses cookies {link}."
        values={{
            link: <a href="google.com">
                <FormattedMessage
                    id="link"
                    defaultMessage="log in"
                />
            </a>
        }}
    />
);