组件属性不支持复杂内容（混合 C# 和标记）

Question

我正在尝试使用 Razor 参数并将其传递给 Blazor 以进行进一步处理，但我在我尝试构建的 @onclick 事件上收到此错误消息“组件属性不支持复杂内容（混合 C# 和标记）” img标签如下：

<tr>

            @{
                for (int j = 0; j < Candidates.Length; j++)
                {
                    <th>
                        <div class="grow">

                            <img src="/Candidates/@(Candidates[j].ToString()).jfif" alt="@Candidates[j].ToString()" @onclick="IncrementScore(@j)" />
                        </div>
                    </th>
                }
            }
        </tr>

任何建议将不胜感激！

Answer 1

你也可以将复杂的内容封装在一个代码方法中：

<NavLink href="@GetLink()" class="button is-link">
   Details
</NavLink>


@code {

   [Parameter]
   public string? Id { get; set; }

   private string GetLink()
   {
       return this.Id != null ? $"/details/{this.Id}" : "#";
   }

}

Answer 2

由于您的代码出现编译器错误的主要问题是您调用 IncrementScore 方法的方式。您应该意识到 @onclick 不是您应该为其分配值的 Html 属性，在本例中是获取值的方法。

@onclick 属性是一个编译器指令，指示编译器如何形成应在单击元素时调用的事件处理程序、事件的目标等。在您的情况下，您希望调用一个方法并将其传递给价值。这只能通过使用 Lambada 表达式来完成，如下所示：

@onclick="@(()=> IncrementScore(<value to pass to the method>))"

以下代码片段说明了在使用 for 循环或 foreach 循环时如何正确调用 IncrementScore 方法。对于在循环中传递给方法的局部变量，这种区别非常重要

您可以将以下代码放在 Index 组件中，并按原样运行：

@*@for (int j = 0; j < Candidates.Count; j++)
{
    int localVariable = j;

    <img src="@Candidates[j].Src"  @onclick="@(()=> 
                         IncrementScore(localVariable))" />
}*@

@foreach (var candidate in Candidates)
{
    Random random = new Random();

    <img src="@candidate.Src" @onclick="@(()=> 
                              IncrementScore(random.Next(0,9)))" />
}


<p>@Scores.ToString()</p>

@code {
   List<Candidate> Candidates = Enumerable.Range(1, 10).Select(i => new 
           Candidate { CandidateName = i }).ToList();

private int Scores;

private Task IncrementScore(int score)
{

    Scores = score;
    return Task.CompletedTask;
}

public class Candidate
{
    public int CandidateName { get; set; }
    public string Src => $"{CandidateName}.jfif";
}
} 

希望这可以帮助...