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

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

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

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

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

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

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

   

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

Counter コンポーネントにパラメーターを定義して、ボタンをクリックするたびにインクリメントする量を指定します。

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

2. IncrementCountの値をインクリメントするときにIncrementAmount値を使用するようにcurrentCountメソッドを変更します。

   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 コンポーネントには、次の図に示すように、Click meボタンが選択されるたびに10ずつインクリメントされる独自のカウンターがあります。

   

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