Fatal编程技术网
  • csharp/
  • C# 如何在Blazor中将可选的RenderFragment从父组件传递到子组件？

C# 如何在Blazor中将可选的RenderFragment从父组件传递到子组件？

c# razor blazor

C# 如何在Blazor中将可选的RenderFragment从父组件传递到子组件？,c#,razor,blazor,blazor-client-side,blazor-webassembly,C#,Razor,Blazor,Blazor Client Side,Blazor Webassembly,上下文： 我们有一个Blazor应用程序，其中包含以下3个文件： 儿童剃须刀 剃须刀 razor（这是使用者，它使用父组件） ChildComponent.razor <div> @if(Body != null) { @Body } @if(Footer != null) { <div class="footer"> @Footer

上下文： 我们有一个Blazor应用程序，其中包含以下3个文件：

  • 儿童剃须刀
  • 剃须刀
  • razor（这是使用者，它使用父组件）
ChildComponent.razor

<div>
    @if(Body != null)
    {
        @Body
    }

    @if(Footer != null)
    {
        <div class="footer">
            @Footer
        </div>
    }
</div>

@code
{
    [Parameter]
    public RenderFragment Body { get; set; }
    
    [Parameter]
    public RenderFragment Footer { get; set; }
}
消费文件是Test.razor，如下所示：

<ParentComponent Text="Hello World"></ParentComponent>
但这是一种糟糕的方式，因为我们收到了警告：

BL0005:不应在组件外部设置组件参数

问题：如何将可选的RenderFragment传递给子组件？

是否尝试将参数设置为子组件中的默认值 看起来是这样的

<div>
@if(Body != null)
{
    @Body
}

@if(Footer != null)
{
    @Footer
}
在父组件中，还可以设置默认值

 @if(ParentFooter != null)
  {
   <ChildComponent Footer="ParentFooter">
        <Body>
            <p>@Text</p>
        </Body>
    </ChildComponent>
    }
else {
// show something else 
}
    @code
    {
        [Parameter]
        public string Text { get; set; }
    
        [Parameter]
        public RenderFragment ParentFooter { get; set; } = null;
    }

@if（ParentFooter！=null）
{
@正文

}
否则{
//展示别的东西
}
@代码
{
[参数]
公共字符串文本{get；set；}
[参数]
公共RenderFragment ParentFooter{get；set；}=null；
}
如果这没有帮助，你能发布github链接吗

关于这一点，

使用
CascadingValue
可以：

ParentComponent.razor:

<CascadingValue Value="this">
    <ChildComponent>
        <Body>
            <p>@Text</p>
        </Body>
    </ChildComponent>
</CascadingValue>

@code
{
    [Parameter]
    public string Text { get; set; }

    [Parameter]
    public RenderFragment ParentFooter { get; set; }
}

<div>
    @if (Body != null)
    {
        @Body
    }

    @if (ParentComponent != null && ParentComponent.ParentFooter != null)
    {
        <div class="footer">
            @ParentComponent.ParentFooter
        </div>
    }
</div>

@code
{
    [CascadingParameter]
    public ParentComponent ParentComponent { get; set; }

    [Parameter]
    public RenderFragment Body { get; set; }
}

<ParentComponent Text="Hello World">
    @* <ParentFooter>Footer</ParentFooter> // <- Optional *@
</ParentComponent>


@正文

@代码
{
[参数]
公共字符串文本{get；set；}
[参数]
公共RenderFragment ParentFooter{get；set；}
}
ChildComponent.razor:

<CascadingValue Value="this">
    <ChildComponent>
        <Body>
            <p>@Text</p>
        </Body>
    </ChildComponent>
</CascadingValue>

@code
{
    [Parameter]
    public string Text { get; set; }

    [Parameter]
    public RenderFragment ParentFooter { get; set; }
}

<div>
    @if (Body != null)
    {
        @Body
    }

    @if (ParentComponent != null && ParentComponent.ParentFooter != null)
    {
        <div class="footer">
            @ParentComponent.ParentFooter
        </div>
    }
</div>

@code
{
    [CascadingParameter]
    public ParentComponent ParentComponent { get; set; }

    [Parameter]
    public RenderFragment Body { get; set; }
}

<ParentComponent Text="Hello World">
    @* <ParentFooter>Footer</ParentFooter> // <- Optional *@
</ParentComponent>


@if（Body！=null）
{
@身体
}
@if（ParentComponent！=null&&ParentComponent.ParentFooter！=null）
{
@ParentComponent.ParentFooter
}
@代码
{
[CascadingParameter]
公共ParentComponent ParentComponent{get；set；}
[参数]
公共RenderFragment主体{get；set；}
}
测试。剃须刀：

<CascadingValue Value="this">
    <ChildComponent>
        <Body>
            <p>@Text</p>
        </Body>
    </ChildComponent>
</CascadingValue>

@code
{
    [Parameter]
    public string Text { get; set; }

    [Parameter]
    public RenderFragment ParentFooter { get; set; }
}

<div>
    @if (Body != null)
    {
        @Body
    }

    @if (ParentComponent != null && ParentComponent.ParentFooter != null)
    {
        <div class="footer">
            @ParentComponent.ParentFooter
        </div>
    }
</div>

@code
{
    [CascadingParameter]
    public ParentComponent ParentComponent { get; set; }

    [Parameter]
    public RenderFragment Body { get; set; }
}

<ParentComponent Text="Hello World">
    @* <ParentFooter>Footer</ParentFooter> // <- Optional *@
</ParentComponent>



@*Footer/我想如果你想用
RenderFragment
构建你的Footer，它很容易传递

父组件


<ChildComponent Footer="@GenerateFooter()" />

@code {
    // Your Method that will generate footer for you
      private RenderFragment GenerateFooter() {
           return builder => {
                   builder.OpenComponent(0, typeof(YourFooterComponent));
                   builder.AddAttribute(1, "YourRandomAttribute", "YourValueForAttribute")
                   builder.CloseComponent();
               }
      }
}



@*The place where you'd like to show your footer.*@
@Footer


@code{

    [Parameter]
    public RenderFragment Footer { get; set; }

}


如果您不想只为页脚创建另一个组件，可以通过builder.OpenElement（）来实现。。。并创建所需的元素以及必需的样式和类，所有这些都可以使用属性来完成。BlazoreUniversity是一个网站，里面有很多很酷的东西


让我知道它是否对你有帮助，对未来也有好处。因为问题发布后已经很晚了。
您解决问题了吗，或者您仍然想知道这一点？