演習 - コンポーネントを追加する

• 4 分

この演習では、アプリのホーム ページに Razor コンポーネントを追加します。

ホーム ページに Counter コンポーネントを追加する

1. Components/Pages/Home.razor ファイルを開きます。

2. Home.razor ファイルの末尾に <Counter /> 要素を追加して、Counter コンポーネントをページに追加します。

   @page "/"
   
   <PageTitle>Home</PageTitle>
   
   <h1>Hello, world!</h1>
   
   Welcome to your new app.
   
   <Counter />
   

3. アプリを再起動するか、ホット リロードを使って、変更を適用します。 Counter コンポーネントがホーム ページに表示されます。

   

コンポーネントを変更する

ボタンがクリックされるたびに増分する量を指定するために、Counter コンポーネントでパラメーターを定義します。

1. 属性 [Parameter] を使用して、IncrementAmount のためのパブリック プロパティを追加します。

2. currentCount の値を増分するときに IncrementAmount を使うように IncrementCount メソッドを変更します。

   Counter.razor の更新されたコードは次のようになります。

   @page "/counter"
   @rendermode InteractiveServer
   
   <PageTitle>Counter</PageTitle>
   
   <h1>Counter</h1>
   
   <p role="status">Current count: @currentCount</p>
   
   <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
   
   @code {
       private int currentCount = 0;
   
       [Parameter]
       public int IncrementAmount { get; set; } = 1;
   
       private void IncrementCount()
       {
           currentCount += IncrementAmount;
       }
   }
   

3. 次のコードの最後の行で示されているように、Home.razor で、<Counter /> 要素を更新して、増分量を 10 に変更する IncrementAmount 属性を追加します。

   @page "/"
   
   <h1>Hello, world!</h1>
   
   Welcome to your new app.
   
   <Counter IncrementAmount="10" />
   

4. 実行中のアプリに変更を適用します。

   次の画像で示すように、Home コンポーネントは、[クリックしてください] ボタンが選択されるたびに 10 ずつ増分される独自のカウンターを持つようになりました。

   

   /counter の Counter コンポーネントは、引き続き 1 ずつインクリメントされます。