Question

我有一个字符串，里面有一个链接。但是，我不能为转换目的而制动字符串，所以我认为通过使用'FormattedMessage'可以像这样将一些JSX传递给它：

    <FormattedMessage
        id= "CreateIdentity.error.generalError"
        values={link}
    />

其中的链接是：

const link = 
    <Link target="_blank" to={`${config.help}`}>
        {formatMessage({id: "CreateIdentity.error.linkHelpPages"})}
    </Link>;

我的翻译字符串是

  "CreateIdentity.error.generalError": "You can try again, or {link} for more information";

完整组件：

import React, {Fragment} from 'react';
import Link from 'react-router';
import PropTypes from 'prop-types';
import FormattedMessage from 'react-intl';

import {Alert} from '../Icons/Icons';

import {getFullConfig} from '../../../utils/getFullConfig';

const config = getFullConfig();

const GenericError = (props) => {
    const {formatMessage, statusCode} = props;
    const link = 
        <Link target="_blank" to={`${config.help}`}>
            {formatMessage({id: "CreateIdentity.error.linkHelpPages"})}
        </Link>;


    return (
        <Fragment>
            <header>
                {formatMessage({id: "CreateIdentity.error.generalErrorTitle"})}
            </header>
            <Alert className="alert" />
            {/* {formatMessage({id: "CreateIdentity.error.generalError"}, {link})} */}


            <FormattedMessage
                id= "CreateIdentity.error.generalError"
                values={{link}}
            />
            <p>
                {formatMessage({id: "CreateIdentity.error"})}
                {statusCode}
            </p>
        </Fragment>
    );
};


GenericError.propTypes = {
    formatMessage: PropTypes.func.isRequired,
    statusCode: PropTypes.number.isRequired
};

export default GenericError;

但是应用程序中断了：

index.js？92df：697 [React Intl]错误格式化消息：语言环境的“ CreateIdentity.error.generalError”：“ en”错误：国际字符串上下文变量'link'未提供给字符串'You can 再试一次，或{link}以获取更多信息”

自定义JSX以响应intl formattedMessage

0 个答案: