使用打字稿的 FormattedMessage 值块

Question

我在文档中看到了这个例子：

<FormattedMessage
  id="foo"
  defaultMessage="To buy a shoe, <a>visit our website</a> and <cta>buy a shoe</cta>"
  values={{
    a: chunks => (
      <a
        class="external_link"
        target="_blank"
        href="https://www.example.com/shoe"
      >
        {chunks}
      </a>
    ),
    cta: chunks => <strong class="important">{chunks}</strong>,
  }}
/>

但是在使用 typescript 时，块函数出现以下错误：

No overload matches this call.
  Overload 2 of 2, '(props: Props, context: any): FormattedMessage', gave the following error.
    Type '(chunks: any) => Element' is not assignable to type 'string | number | boolean | Element | Date | null | undefined'.
      Type '(chunks: any) => Element' is not assignable to type 'Date'.
  Overload 2 of 2, '(props: Props, context: any): FormattedMessage', gave the following error.
    Type '(chunks: any) => Element' is not assignable to type 'string | number | boolean | Element | Date | null | undefined'.
      Type '(chunks: any) => Element' is not assignable to type 'Date'.

FormattedMessage 的类型是否不接受函数？

Answer 1

键入字符串[] 将正常工作。

<FormattedMessage
    id="foo"
    defaultMessage="To buy a shoe, <a>visit our website</a> and <cta>buy a shoe</cta>"
    values={{
      a: (chunks: string[]) => (
        <a
          className="external_link"
          target="_blank"
          rel="noreferrer"
          href="https://www.example.com/shoe"
        >
          {chunks}
        </a>
      ),
      cta: (chunks: string[]) => (
        <strong className="important">{chunks}</strong>
      )
    }}
  />

使用打字稿的 FormattedMessage 值块

FormattedMessage values chunks using typescript

javascript

typescript

reactjs

react-intl