CLI から Format.js 抽出を実行し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生成に使用しています