# react-core-linter: static-jsx
URL: https://generaltranslation.com/ja/docs/react-core-linter/rules/static-jsx.mdx
---
title: static-jsx
description: <T> コンポーネントの子要素は静的なものでなければなりません
---

## 概要

[`<T>`](/docs/react/api/components/t) コンポーネント内の動的コンテンツが、変数コンポーネントでラップされていることを保証します。

このルールは、[`<T>`](/docs/react/api/components/t) コンポーネント内に直接記述され、[`<Var>`](/docs/react/api/components/var) や [`<Branch>`](/docs/react/api/components/branch) などの適切な変数コンポーネントでラップされていない動的コンテンツを検出します。

## 自動修正

`eslint --fix` を実行すると、動的コンテンツは自動的にラップされます。

* **三項演算子 / 論理 AND** → [`<Branch>`](/docs/react/api/components/branch)
* **その他の式** → [`<Var>`](/docs/react/api/components/var)
* **不足している import** は自動的に追加されます

```jsx
// 修正前
<T>Hello {userName}!</T>
<T>{role === "admin" ? "Administrator" : role === "editor" ? "Editor" : "Viewer"}</T>
<T>{isOnline && "Online"}</T>

// 修正後
<T>Hello <Var>{userName}</Var>!</T>
<T><Branch branch={role} admin="Administrator" editor="Editor">Viewer</Branch></T>
<T><Branch branch={!!isOnline} true="Online" /></T>
```

## リファレンス

### オプション

| オプション  | 型          | デフォルト                                                                                     | 説明                             |
| ------ | ---------- | ----------------------------------------------------------------------------------------- | ------------------------------ |
| `libs` | `string[]` | `["gt-react", "gt-next", "gt-react-native", "gt-i18n", "@generaltranslation/react-core"]` | 翻訳コンポーネントを確認する対象のライブラリモジュールの配列 |

***

## 設定

```json
{
  "@generaltranslation/react-core-linter/static-jsx": ["error", {
    "libs": ["gt-react", "gt-next", "gt-react-native"]
  }]
}
```