0

是否可以从其 CLI 运行 Format.js extract 并从FormattedMessage嵌套在另一个组件中的组件中获取结果？

组件：

import React, {
  FunctionComponent,
  JSXElementConstructor,
  CSSProperties,
} from 'react';
import { FormattedMessage } from 'react-intl';
import cn from 'classnames';

import s from './Text.module.css';

type TextProps = {
  variant?: Variant;
  className?: string;
  style?: CSSProperties;
  children?: string;
  onClick?: () => any;
};

type Variant = 'heading' | 'pageHeading' | 'sectionHeading' | 'paragraph';

const Text: FunctionComponent<TextProps> = ({
  style,
  className = '',
  variant = 'paragraph',
  children,
  onClick,
}) => {
  const componentsMap: {
    [Variant: string]: React.ComponentType<any> | string;
  } = {
    heading: 'h1',
    pageHeading: 'h1',
    sectionHeading: 'h2',
    paragraph: 'p',
  };

  const Component:
    | JSXElementConstructor<any>
    | React.ReactElement<any>
    | React.ComponentType<any>
    | string = componentsMap![variant!];

  return (
    <Component
      className={cn(
        s.root,
        {
          [s.heading]: variant === 'heading',
          [s.pageHeading]: variant === 'pageHeading',
          [s.sectionHeading]: variant === 'sectionHeading',
          [s.paragraph]: variant === 'paragraph',
        },
        className
      )}
      onClick={onClick}
      style={style}
    >
      <FormattedMessage defaultMessage={`${children}`} />
    </Component>
  );
};

export default Text;

然后我打算在整个项目中重用该组件，如下所示：

<Text variant='paragraph'>This is a paragraph</Text>

我希望这会被提取，但是在运行时

formatjs extract -- 'src/**/*.ts*' --out-file lang/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'

我总是得到一个空的 json 文件{}

我babel-plugin-formatjs用于捆绑和自动 ID 生成

4

0 回答 0