相关疑难解决方法(0)

我刚刚开始查看 blazor (v0.3) 并进行了一些测试，我想使用 blazor 添加一个列表

首先我创建了一个List<string>来测试同一页面中的简单列表

<ul>
    @foreach (var item in listItems)
    {
        <li>@item</li>
    }
</ul>


@functions {

    private List<string> listItems = new List<string>();
    private string newItem;

    private void AddItem()
    {
        if (string.IsNullOrEmpty(newItem))
            return;

        listItems.Add(newItem);
        newItem = "";
    }

}

这工作正常，当我添加它时将每个元素添加到列表中。但是后来，我尝试添加组件，添加单个组件很容易，基于这里的这个问题，但是对于列表，我遇到了下一个问题：

• 我创建了一个<li>组件只是为了测试组件的功能，这里是组件视图

<li id="@ID">
    @Text
</li>   




@functions {
  [Parameter]
  string Text { get; set; } 
  [Parameter]
  string ID { get; set; }
}

Run Code Online (Sandbox Code Playgroud)

• 然后在父视图中

<input type="text" bind="TxtExample" name="inpAdd"/>
  <button onclick="@addCompoment">add comp1</button> …

Run Code Online (Sandbox Code Playgroud)

有没有办法在 Blazor 组件内的子组件上设置 css 类？

我现在拥有的是：

@using Microsoft.AspNetCore.Components;
@inherits ComponentBase

<div class="button-group-wrapper">
    @SecondaryButton
    <div class="floating-sticky-wrapper">
        @PrimaryButton
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment PrimaryButton { get; set; }

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

然后我通过以下方式“注入”RenderFragments：

<FloatingStickyButton>
    <SecondaryButton>
        <button type="button" class="button ...">Secondary</button>
    </SecondaryButton>
    <PrimaryButton>
        <button type="submit" class="button button--primary ...">Primary</button>
    </PrimaryButton>
</FloatingStickyButton>

我想要什么？

我想在主按钮上设置名为“floating-sticky-button”的css类。但是我想在组件内部设置这个 css 类，这样程序员就不需要关心在按钮元素上设置外部的类。

像这样的东西（注意这里的@PrimaryButton）：

@using Microsoft.AspNetCore.Components;
@inherits ComponentBase

<div class="button-group-wrapper">
    @SecondaryButton
    <div class="floating-sticky-wrapper">
        @PrimaryButton({class: 'floating-sticky-button'})
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment PrimaryButton { …