Blazor Dynamic Component中如何配置@bind双向绑定？

你遇到的问题是因为@bind-Value是Blazor的双向绑定语法糖，并不是组件实际存在的参数，直接作为键传入参数字典会导致系统找不到对应参数。正确的做法是将双向绑定拆分为**Value参数和ValueChanged回调**两部分，分别传入参数字典。

具体实现步骤： #

1. 拆分双向绑定参数
   不要使用@bind-Value作为参数键，而是分别添加Value（绑定的属性值）和ValueChanged（值变更时的回调）两个参数到字典中。

2. 构建参数字典
   示例代码如下（假设property是你要绑定的属性，类型为string，可根据实际类型调整）：

   RenderComponentParameters = new Dictionary<string, object>()
   {
       // 传入当前属性值
       { "Value", property },
       // 传入值变更回调，更新属性并触发UI刷新
       { "ValueChanged", EventCallback.Factory.Create<string>(this, (newValue) => 
           {
               property = newValue;
               // 组件内需要调用此方法通知UI更新
               StateHasChanged();
           })
       }
   };
   

3. DynamicComponent使用不变
   你的组件调用代码无需修改，保持原写法即可：

   <DynamicComponent Type="context.Item.RenderComponent" Parameters="context.Item.RenderComponentParameters" />
   

注意事项： #

• 确保你绑定的目标组件（context.Item.RenderComponent指向的组件）确实定义了Value参数和ValueChanged回调（比如Blazor内置的InputText、InputNumber等组件都符合这个规范）。
• 如果目标组件需要支持表达式验证，还需要添加ValueExpression参数，示例：

  { "ValueExpression", Expression<Func<string>>(() => property) }
  

• 回调中的类型要和Value参数的类型严格匹配，比如int类型的属性就要用EventCallback.Factory.Create<int>。

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