React-Intl 在 FormatMessage 中包装子元素

Question

我正在使用 react/redux 和 react-intl 库。 我想以以下格式呈现 <ol> <li> ... </li</ol> 。

• 发送包含以下信息的电子邮件 foo@bar.com：
  • 第 1 步
  • 第 2 步
  • 步骤 3

我的反应代码

const messages = {
    a11yBodyPolicyLink: {
        id: 'BodyEmailHeading'
        description: 'BodyEmailHeading'
        defaultMessage: 'Send an email {emailElement} with the following information:'
    },
    Step1: {
        id: 'Step1'
        description: 'Step1'
        defaultMessage: 'Step1'
    },
    Step2: {
        id: 'Step2'
        description: 'Step2'
        defaultMessage: 'Step2'
    },
    Step3: {
        id: 'Step3'
        description: 'Step3'
        defaultMessage: 'Step3'
    },
    Step4: {
        id: 'Step4'
        description: 'Step4'
        defaultMessage: 'Step4'
    },
    Step5: {
        id: 'Step5'
        description: 'Step5'
        defaultMessage: 'Step5'
    },
};
const emailElement = (<a href="mailto:foo@bar.com">foo@bar.com</a>);
<ol className={styles['numerical-list']}>
    <WrappedMessage
        message={messages.BodyEmailHeading}
        values={{
            emailElement,
         }}
      >
      {
        displayText => (
          <li>{displayText}
          <WrappedMessage
              message={messages.Step1}
            />
            <ol className={styles['alphabetical-list']}>
              <WrappedMessage
                message={messages.Step2}
                tagName="li"
              />
              <WrappedMessage
                message={messages.Step3}
                tagName="li"
              />
              <WrappedMessage
                message={messages.Step4}
                tagName="li"
              />
              <WrappedMessage
                message={messages.Step5}
                tagName="li"
              />
            </ol>

          </li>
        )
      }
    </WrappedMessage>
  </ol>

WrapMessage

const WrappedMessage = (props) => {
  const { message, intl, ...other } = props;
  let locale = intl.defaultLocale;
  return (
    <span lang={locale}>
      <FormattedMessage
        {...message}
        {...other}
      />
    </span>
  );
};

预期输出

• 发送包含以下信息的电子邮件 foo@bar.com：
  • 第 1 步
  • 第 2 步
  • 步骤 3

实际输出

• 发送电子邮件
  • 第 1 步
  • 第 2 步
  • 步骤 3

沙盒

https://codesandbox.io/s/formattedmessage-render-props-c6hfn

Answer 1

试试这个：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { FormattedMessage } from "react-intl";
const messages = {
  buttonTitle: {
    id: "xyz.buttonTitle",
    defaultMessage: "My Button"
  },
  a11yBodyEmailHeading: {
    id: "a11yBodyEmailHeading",
    defaultMessage: "send me email at {emailElement} for more information."
  },
  bodyname: {
    id: "bodyname",
    defaultMessage: "send us your fullname with email."
  },
  bodyinstitue: {
    id: "bodyinstitue",
    defaultMessage: "also mention your institute."
  }
};

const WrappedMessage = props => {
  const { message, ...other } = props;

  // manually check if a translation exists for this message in the current (non-default) locale
  // this allows us to match the containing "lang" span when we fallback to the default locale
  let locale = "en";

  return (
    <span lang={locale}>
      <FormattedMessage {...message} {...other} />
    </span>
  );
};

const emailAddress = "foo@bar.com";
const mailto = `mailto:${emailAddress}`;
const emailElement = `<a href=${mailto}>${emailAddress}</a>`;
class MyComponent extends Component {
  render() {
    return (
      <div>
        <ol>
          <WrappedMessage
            message={messages.a11yBodyEmailHeading}
            values={{
              emailElement: emailElement
            }}
          >
            {displayText => (
              <li>
                <div dangerouslySetInnerHTML={{__html: displayText} }/>;
                {/* {displayText} */}
                <ol>
                  <WrappedMessage message={messages.bodyname} tagName="li" />
                  <WrappedMessage
                    message={messages.bodyinstitue}
                    tagName="li"
                  />
                </ol>
              </li>
            )}
          </WrappedMessage>
        </ol>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<MyComponent />, rootElement);

在此处输出答案：https://codesandbox.io/s/formattedmessage-render-props-j4chu