Blazor Server端聊天应用：如何将MsgModel传递至Razor组件？

我来帮你梳理清楚问题并给出解决方案，核心是要把数据模型和UI组件分离，并通过组件参数完成传值：

第一步：修正消息模型设计 #

你的MsgModel不应该继承ComponentBase——它本质是数据载体，不是UI组件。先改成普通POCO类，同时增加一个标识区分消息类型：

namespace BlazorApp1
{
    public class MsgModel
    {
        public string MsgText { get; set; } = string.Empty;
        // 标记消息是发送还是接收：true=发送，false=接收
        public bool IsSent { get; set; }
    }
}

第二步：调整消息展示组件 #

ReceiveMsg和SendMsg需要通过[Parameter]接收MsgModel实例，而不是继承模型：

ReceiveMsg.razor

<h3>ReceiveMsg</h3>@Msg.MsgText

@code {
    [Parameter]
    public MsgModel Msg { get; set; } = new();
}

SendMsg.razor

<h3>SendMsg</h3>@Msg.MsgText

@code {
    [Parameter]
    public MsgModel Msg { get; set; } = new();
}

第三步：在Index组件中正确传值渲染 #

现在遍历消息列表时，根据IsSent属性选择对应的组件，并把当前消息实例传递给组件的Msg参数：

@page "/"

@foreach (var msg in MsgList)
{
    @if (msg.IsSent)
    {
        <SendMsg Msg="@msg" />
    }
    else
    {
        <ReceiveMsg Msg="@msg" />
    }
}

<div id="inputDiv">
    <EditForm Model="_InputMsgModel" OnValidSubmit="@SubmitText">
        <InputText @bind-Value="_InputMsgModel.MsgText" />
        <button type="submit">发送</button>
    </EditForm>
</div>

@code{
    protected MsgModel _InputMsgModel { get; set; } = new();
    protected List<MsgModel> MsgList { get; set; } = new();

    protected void SubmitText()
    {
        if (!string.IsNullOrWhiteSpace(_InputMsgModel.MsgText))
        {
            // 添加发送的消息，标记IsSent为true
            MsgList.Add(new MsgModel
            {
                MsgText = _InputMsgModel.MsgText,
                IsSent = true
            });
            // 清空输入框
            _InputMsgModel.MsgText = string.Empty;
            // 触发UI更新，确保消息即时显示
            StateHasChanged();
        }
    }
}

关键说明 #

1. 为什么不能在列表存组件实例？Blazor的组件生命周期由框架管理，手动创建组件实例会导致状态更新失效、生命周期异常等问题，正确做法是数据与UI分离，列表只存数据模型。
2. 新增的StateHasChanged()用于强制UI更新，确保消息添加后立刻显示；输入非空判断能避免空消息提交。
3. 如果后续需要扩展更多消息类型（比如系统通知），可以把IsSent改成枚举（如MsgType.Sent/Received/System），扩展性更强。

内容的提问来源于stack exchange，提问作者Melon NG