Types

JsxChildren

翻訳とレンダリングが可能なJSXコンテンツの型定義

概要

JsxChildren は、翻訳のためのテキスト、要素、そして variables を含む JSX コンテンツを表します。

type JsxChildren = JsxChild | JsxChild[];

構成

type JsxChild = string | JsxElement | Variable;
種別説明
stringプレーンテキスト
JsxElement構造化された要素
Variable動的プレースホルダー

JsxElement

type JsxElement = {
  t?: string;      // タグ名
  i?: number;      // id  
  d?: GTProp;      // GTプロパティ
  c?: JsxChildren; // 子要素
};

基本的な使用方法

import { JsxChildren, Variable } from 'generaltranslation';

// シンプルなテキスト
const text: JsxChildren = "ようこそ!";

// 変数を含むテキスト
const greeting: JsxChildren = [
  "こんにちは、",
  { k: 'userName' } as Variable,
  "!"
];

構造化要素

// Div要素
const divElement: JsxChildren = {
  t: 'div',
  c: ['ここにコンテンツ']
};

// タイトル付きリンク
const linkElement: JsxChildren = {
  t: 'a',
  d: { ti: 'ホームページにアクセス' },
  c: ['ここをクリック']
};

関連する型

このガイドはどうでしたか?

JsxChildren