小编Kes*_*iam的帖子

我的应用程序使用多个组件，每个组件都以条件方式呈现。是否有可能单独重新渲染特定组件？

MyRazor.razor文件，

 <button @onclick="Chnage">Second</button>
<div>
    @if (renderOne)
    {
        var data1 = Count++;
        <ComponentFirst>@data1</ComponentFirst>
    }
    @if (renderTwo)
    {
        var data2 = Count2++;
        <ComponentSecond class="btn-danger">@data2</ComponentSecond>
     }
</div>
@code { 
    void Chnage()
    {
        renderOne = true;
    }
}

ComponentFirst 和 ComponentSecond 通过检查各自的布尔值来呈现。在单击按钮时，我单独启用了 CompoenentFirst。但 ComponentSecond 也再次渲染。我的目标是如果我启用 renderOne ComponentFirst 应该再次渲染。如果我禁用 renderTwo ComponentTwo 应该再次渲染，而不是为应用程序中的单个更改渲染两个组件。

我在我们的 blazor 应用程序中使用 svg 元素。因为我在 Svg 中使用文本元素。同时我需要文本元素的高度和宽度（以像素为单位）。基于此，我正在对 SVG 元素进行一些尺寸更改。不幸的是，我不知道如何获取文本元素的大小。

在 ASP.Net 应用程序中，有如下方式，

using System.Drawing;
private float GetWidthOfString(string str)
{
    Bitmap objBitmap = default(Bitmap);
    Graphics objGraphics = default(Graphics);
    objBitmap = new Bitmap(500, 200);
    objGraphics = Graphics.FromImage(objBitmap);
    SizeF stringSize = objGraphics.MeasureString(str, new Font("Arial", 12));
    objBitmap.Dispose();
    objGraphics.Dispose();
    return stringSize.Width;
}

但我不能在 blazor 应用程序中使用它。有没有办法以像素为单位找到文本元素的大小？

I need to perform clearRect() after performing clip() in canvas. Unfortunately, It does not working for me.

If I exclude clip() means, clearRect() is working fine me.

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 150);
ctx.clip();  //after removing clip() clearRect() working
ctx.clearRect(20, 20, 100, 50);
</script>

I need to perform clearRect() after performing clip(). Is this possible?

Please find the fiddle

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = …

我在我的代码中使用了 OnInitializedAsync()。在那个钩子中，我正在获取数据。在标记中，我检查了数据是否为空。但是我发现检查的数据是在 onInitalizedAsync() 触发之前执行的。同时，也在获取数据后，执行数据校验。

我已经检查了 blazor 文档，但一直在努力找出它最初触发的原因。

<Component1>
  @if (Data != null)
      {
        @foreach (var item in Data) {
             <Component2>
        }
       }
</Componet1>

@code{
  protected override async Task OnInitializedAsync() {
       Data = //data from dataBase
  }
}

我只需要在获取数据后执行检查的数据。谁能指导我解决这个问题？

提前致谢，

凯萨万

在一个 blazor 示例中，我使用 RenderFragment 来动态更新元素并捕获每次更新的组件引用。在最初捕获元素时，它会正确捕获组件引用。当我更新一个组件时，它会保留旧的 componentReference。组件参考未正确更新。

Index.razor

@page "/"

<button @onclick="AddContent">1st Update</button>
<button @onclick="AddSecondContent">2nd Update</button>
<button @onclick="CheckContent">Check Update</button>
@DataContent

@code {
    RenderFragment DataContent { get; set; }
    List<Counter> CounterReference = new List<Counter>();
    void AddContent()
    {
        DataContent = (Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder builder) =>
        {
            int seq = 0;
            for(int i = 0; i < 3; i++)
            {
                builder.OpenComponent<Counter>(seq++);
                builder.AddComponentReferenceCapture(seq++, ins => { CounterReference.Add((Counter)ins); });
                builder.CloseComponent();
            }

        };
        InvokeAsync(StateHasChanged);
    }

    void AddSecondContent()
    {
        CounterReference.Clear();
        DataContent = (Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder builder) =>
        {
            int seq = 0; …