コンポーネントスロット

コンポーネントスロットを使用すると、Studio生成のUIコンポーネント内に他のコンポーネントをReactコードとしてネストできます。コンポーネントスロットを使用して、投稿上のコメントのような動的に生成されたチャイルドコンポーネントを作成したり、チャイルド要素を完全に置き換えたりできます。

コンポーネントスロットの追加

まず、コンポーネントが必要です。

1. アプリのStudio を起動します。

2. 左側のナビゲーションバーで、UI Library をクリックします。

3. Studio にインポートした UI Library から Figma コンポーネントを選択します。すでに Figma コンポーネントがない場合は、Amplify の Figma UI ファイルから始めることができます。

4. 右上隅の Configure ボタンをクリックして、そのコンポーネントを設定します。

次に、このコンポーネントにコンポーネントスロットを追加します。

1. 左側には、コンポーネントの要素が表示されます。コンポーネント内の Figma Frame () を選択します。

この例では、「Area」フレームが選択されています。

2. 右側のパネルで、「Convert to a slot」ボタンをクリックします。これにより、UI コンポーネントに新しいプロップが追加されます。そのプロップに渡された JSX 要素は、生成されたコンポーネントスロットにレンダリングされます。

3. 必要に応じて、プロパティ名を変更します。

この例では、プロパティは「comments」に名前が変更されています。

コンポーネントスロットの使用

コンポーネントのインポート

コンポーネントにコンポーネントスロットを追加したら、画面下部の Get component code ボタンをクリックして、次のステップの手順を確認します。

1. amplify pull コマンドをコピーして、ターミナルで実行します。
2. インポートコードをコピーして、React アプリコードに貼り付けます。
3. 最後に、コンポーネントをレンダリングします。

/*Import your component*/
import { Ampligram } from './ui-components';

function App() {
  return (
    /*Add your component below*/
    <Ampligram />
  );
}
export default App;

上記のコードがアプリでどのようにレンダリングされるかを以下に示します。可視性を支援するため、軽微なスタイリングが追加されています。

コンポーネントスロットを使用して個々のチャイルドコンポーネントを置き換える

コンポーネントスロットを使用するには、チャイルドコンポーネントをペアレント コンポーネントのプロパティとして渡し、前に選択したプロップ名を使用します。次に、渡したコンテンツは、コンポーネントのチャイルドとしてレンダリングされます。

import { Ampligram } from '.ui-components';

function App() {
  return (
    <Ampligram
      style={styles.post}
      comments={
        //Pass your content into the component slot
        <div>
          <h1>Hi mom!</h1>
          <p>Thanks for checking out my app</p>
        </div>
      }
    />
  );
}
export default App;

上記のコードがアプリでどのようにレンダリングされるかを以下に示します。

コレクションへのコンポーネントスロットの追加

任何のコンポーネントはデータにバインドして、コレクションを生成するために使用できます。これはコンポーネントスロット付きのコンポーネントも含みます。Studio は Amplify で作成された GraphQL API への データ バインディング、DataStore ありおよびなしをサポートします。

ここで、Ampligram コレクションは Post というデータ モデルにマップされています。Post モデルは Comment モデルとの 1 対多リレーションシップを持っているため、各 Post は多くの Comment を持つことができます。以下の AmpligramCollection は、Post モデルの各レコードに対して Ampligram をレンダリングします。次に、関連する各 Comment は comments コンポーネント スロットにレンダリングされます。

この例では、最初の投稿には 2 つのコメントがありますが、2 番目の投稿にはコメントがありません。

import { AmpligramCollection } from './ui-components';

function App() {
  return (
    <AmpligramCollection
      overrideItems={({ item }) => ({
        //Populate the "comments" slot
        comments: (
          <div>
            {/*Map each related comment into a div*/}
            {item.Comments.map((comment) => (
              <div>{comment.content}</div>
            ))}
          </div>
        )
      })}
    />
  );
}
export default App;

チャイルド コンポーネントを動的にレンダリングすることは、コンポーネント スロットが非常に便利な場所です。このコンポーネント スロットに別のコレクションを渡すことさえできます。