Blazor - 동적으로 구성 요소를 만드는 방법

허용 된 답변 과이 답변의 원본 버전에 대한 의견으로 판단하면 구성 요소를 동적으로 추가하는 데 약간의 혼란이있을 수 있습니다. 이것을 달성하는 데는 적어도 몇 가지 방법이 있습니다 (예 : here ). '동적으로'의 의미에 정확히 달려 있습니다.

1) Razor 코드에서 조건문 사용

달성하려는 것이 단순히 데이터 또는 모델의 특정 상태를 기반으로 구성 요소를 표시하거나 숨기는 것이라면 구성 요소를 동적으로 렌더링하는 '일반적인'방법은 Razor 뷰에서 일종의 조건부 코드를 사용하는 것입니다.

간단한 조건부 렌더링

@if (_showCounter)
{
  <MyCounterComponent Count="@_count" />
}

@code {
  bool _showCounter = true;
  int _count;
}

간단한 반복 데이터 세트

항목 목록과 같은 반복되는 데이터 세트의 경우 Blazor의 데이터 바인딩을 활용할 수 있습니다.

판매 주문을 표시 한 다음 각 판매 주문 라인에 대한 하위 구성 요소가있는 페이지 / 구성 요소의 예를 보자. 면도기 페이지에 다음과 같은 코드가있을 수 있습니다.

  @foreach (var salesOrderLine in _salesOrder.salesOrderlines)
  {
    <SalesOrderLine SOLine=@salesOrderLine />
  };

다른 판매 주문 라인을 추가 한 버튼이있는 경우 해당 버튼 클릭 이벤트에서 _salesOrder 모델 / 뷰 모델에 새 레코드를 추가 할 수 있습니다. 버튼 클릭은 일반적으로 다시 렌더링을 트리거하므로 페이지에 여분의 SalesOrderLine 구성 요소가 자동으로 표시되어야합니다 this.StateHasChanged();

다른 데이터 유형을 포함하는 데이터 세트 반복 (다형성)

목록에 다른 유형이 포함되어 있으면 switch 문을 사용하여 렌더링 할 구성 요소 유형을 결정할 수 있습니다 (예 : 이 github question ).

<ul>
    @foreach (fruit in fruits)
    {
        switch(fruit)
        {
            case PearComponent p:
                <PearComponent ParameterOfSomeSort="p"></PearComponent>
                <li>Or render pears like this, if you want the li in it</li>
                break;
            case AppleComponent a:
                <AppleComponent></AppleComponent>
                break;
            case BananaComponent b:
                <BananaComponent></BananaComponent>
                break;
            case RaspberryComponent r:
                <RaspberryComponent></RaspberryComponent>
                break;
        }
    }
</ul>

2. RenderFragment를 사용한 동적 렌더링

위의 Razor 접근 방식으로는 제대로 처리 할 수없는 경우가 있습니다. 이 경우 RenderFragment 는 페이지의 일부를 동적으로 렌더링하는 다른 방법을 제공합니다.

다형성 목록

진정한 다형성 목록 (예 : 모두 동일한 인터페이스를 구현하거나 동일한 클래스에서 상속하는 객체 목록)이있는 경우이 유형의 접근 방식을 사용할 수 있습니다 ( github post ).

@page "/"

@foreach (CounterParent counter in components)
{
    RenderFragment renderFragment = (builder) => { builder.OpenComponent(0, counter.GetType()); builder.CloseComponent(); };
    <div>
        <div>Before the component</div>
        @renderFragment
        <div>Afterthe component</div>
    </div>
}

@code
{
    List<CounterParent> components = new List<CounterParent>() { new CounterParent(), new CounterChild() };
}

Blazor 팀은 Blazor에서 다형성 목록 처리 방법 개선 을 고려하고 있습니다.

결론

여기서 중요한 점은 (MVC 배경을 가진 사람들을 위해) MVC에서와 같이 새로운 HTML을 DOM에 수동으로 삽입하거나 부분 뷰를 동적으로로드 할 필요가 없다는 것입니다 .Blazor는 당신.

MVC에 대한 면도기 페이지와 Blazor에 대한 면도기 페이지의 구문이 유사 함에도 불구하고, Blazor 모델은 개념적으로 MVC보다 React와 비슷한 것에 훨씬 더 가깝습니다. .

이 페이지에는 Blazor의 데이터 바인딩에 대한 유용한 정보가 있습니다.