> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# カスタムコンポーネントのよくある質問

> YiDA カスタムコンポーネントに関するよくある質問への回答。コンポーネントの削除方針、バージョン管理、依存関係の取り扱い、公式推奨事項などを網羅的に解説します。

## 1. 削除機能が見つかりません

ベータ期間中は削除機能を提供していません。また、正式リリース後も提供されない可能性があります。削除は複雑な依存関係の問題を引き起こすため、現時点では必須と判断していません。方針は [https://www.npmjs.com/](https://www.npmjs.com/) と同様です。

### 2. ビジネスコンポーネントをどのように理解すればよいですか？

こちらの[リンク](/ja/open/yida/guide/keywords)を参照してください。

## 3. コンポーネントの構造

コンポーネントはビューと属性で構成されます。利用者側では、コンポーネントの属性を変更することで、コンポーネントに異なるビューを表示できます。
ビューはさらに、デザインビューとランタイムビューに分けられます。多くの場合、両者は共通化して再利用できます。

提供者側では、コンポーネントのビューと属性の両方を個別に構築する必要があります。

## 4. カスタムコンポーネントを含むアプリを他の組織に配布した後、正常に開けますか？

はい。
カスタムコンポーネントを含むアプリを他の組織に配布した後、配布先の組織はコンポーネントを正常に利用できますが、更新はできません。コンポーネントを更新するには、サービスプロバイダーがリモートメンテナンスを通じて、配布先のアプリに新バージョンのコンポーネントを再インストールする必要があります。コンポーネントが適切に抽象化されていれば、配布後のアプリ更新ニーズの一部に対応できます。

## 5. ページ内でカスタムコンポーネントの属性にアクセスするには？

カスタムコンポーネントは基本コンポーネントと同じ動作をします。`this.$('fieldId').get('propName')` を使用して、対応するコンポーネントの属性を取得します。

## 6. ページ内でカスタムコンポーネントの属性を更新するには？

カスタムコンポーネントは基本コンポーネントと同じ動作をします。`this.$('fieldId').set('propName', propValue)` を使用して、対応するコンポーネントの属性を更新します。
または、データソースの変数バインディング方式を利用します。

## 7. コンポーネント内でページのコンポーネントを取得し、ページ内のコンポーネントと連携するには？

カスタムコンポーネントに関数型の属性を追加し、これをイベントコールバックとして利用できます。
ページ内では、このイベントコールバックを介してページ上の他のコンポーネントと連携できます。
コンポーネント内では、コンポーネントのイベント発生時や DidMount 内など、適切なタイミングで `this.props.xxx()` を呼び出してこのコールバックを実行します。
ヒント：関数型の属性にはデフォルト値を設定でき、非表示にすることもできます。

## 8. カスタムコンポーネントを削除するには？

現在、コンポーネントの削除には対応していません。削除は複雑な依存関係の問題を引き起こすためです。方針は [https://www.npmjs.com/](https://www.npmjs.com/) と同様です。

## 9. カスタムコンポーネントをアンインストールするには？

現在、コンポーネントのアンインストールには対応していません。既存のアプリに影響を及ぼす可能性があるためです。この機能は今後のイテレーションで検討します。

## 10. カスタムコンポーネントはサードパーティ NPM パッケージのインストールに対応していますか？

現時点では対応していません。代わりに、CDN リソースの動的読み込みを利用できます。

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
function loadScript(src, callback) {
  if (!src) {
    return;
  }
  const node = document.createElement('script');
  node.src = src;
  node.addEventListener('load', callback, false);
  document.head.appendChild(node);
}
function loadCss(url) {
  const linkElement = document.createElement('link');
  linkElement.rel = 'stylesheet';
  linkElement.href = url;
  document.body.appendChild(linkElement);
}
(function loadAssets() {
  loadCss('https://dev.g.alicdn.com/yida-platform/react-cropper/1.0.0/css/react-cropper.css');
  loadScript('https://dev.g.alicdn.com/yida-platform/react-cropper/1.0.0/js/react-cropper.js', () => {
    // ここにコードを記述
  });
})();
```

## 11. インストール後、パネルにコンポーネントが表示されません

A：インストールのスコープを確認してください。

## 12. カスタムコンポーネントを使用してフォームでデータを送信するには？

A：現在、YiDA カスタムコンポーネントはフォームコンポーネントに対応していません。データを送信したい場合は、既存のフォームコンポーネントに値を設定する方法をご利用ください。例：一意の識別子を持つ属性を宣言し、利用時に既存フォームの一意の識別子を渡したうえで、コンポーネント側のイベントを通じて必要なデータを既存フォームに書き戻します。

## 13. コンポーネントバージョンの説明

コンポーネントは **開発版** と **正式版** に分かれます。
YiDA カスタムコンポーネントのバージョン管理は、[セマンティックバージョニング](https://semver.org/lang/zh-CN/) に追加の規約を加えた方式に従います。

1. 0.1.0 はデフォルトの開発版です。開発版はコンポーネントデザイナーとリアルタイムに同期してデバッグできます。
2. 1.x.x はリリース後の正式版であり、現行バージョンの機能をロックすることで、オンライン利用時の安定性を保証します。**したがって、本番環境のアプリはリリース後に正式版 1.x.x をインストールする必要があります。**

## 14. 属性を定義しました。この属性が変化したとき、コンポーネントはどのように連動して変化しますか？

コンポーネントデザイナーで変化させたいコンポーネントを選択し、対象となる属性を特定したうえで、その属性に変数またはカスタムハンドラー関数をバインドします。そして `this.props.xxx` を使用して、各ケースに応じた処理を実装します。例：

## 15. コンポーネント内でスタイルを動的に設定できますか？

はい、コンテナコンポーネントを利用できます。コンテナコンポーネントに「カスタムスタイルクラス」を追加し、変数バインディングによって制御します。