Avalonia中React组件的等价物是什么？如何封装多元素可复用UI？

核心结论 #

Avalonia里和React组件最匹配的是UserControl——它就是专门用来封装由多个现有控件组成的可复用UI片段的工具，完全符合你“组合多控件、接收输入、暴露输出”的需求。TemplatedControl/CustomControl更偏向需要自定义模板的单个控件（类似React中支持高度定制模板的组件），对你的场景来说UserControl是最优解。

实现步骤（以一个用户名片组件为例） #

1. 创建带AXAML的UserControl

新建一个UserControl（比如命名为UserProfileCard），AXAML里直接组合多个现有控件，就像React写JSX一样：

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="YourApp.Controls.UserProfileCard">
  <!-- 外层容器，组合头像、用户名、按钮 -->
  <Border Padding="12" CornerRadius="8" Background="#F5F5F5">
    <StackPanel Orientation="Horizontal" Spacing="8">
      <Image x:Name="ProfileAvatar" Width="48" Height="48" />
      <StackPanel>
        <TextBlock x:Name="UserNameText" FontSize="16" FontWeight="Bold" />
        <Button x:Name="FollowButton" Content="Follow" />
      </StackPanel>
    </StackPanel>
  </Border>
</UserControl>

2. 定义输入属性（对应React的Props）

在C#类中通过AvaloniaProperty定义可绑定的输入属性，支持外部传值：

using Avalonia;
using Avalonia.Controls;
using Avalonia.Media.Imaging;

namespace YourApp.Controls;

public partial class UserProfileCard : UserControl
{
    public UserProfileCard() => InitializeComponent();

    // 用户名属性，外部可通过<UserProfileCard UserName="xxx" />传递
    public static readonly StyledProperty<string> UserNameProperty =
        AvaloniaProperty.Register<UserProfileCard, string>(nameof(UserName));

    public string UserName
    {
        get => GetValue(UserNameProperty);
        set => SetValue(UserNameProperty, value);
    }

    // 头像源属性
    public static readonly StyledProperty<Bitmap> AvatarSourceProperty =
        AvaloniaProperty.Register<UserProfileCard, Bitmap>(nameof(AvatarSource));

    public Bitmap AvatarSource
    {
        get => GetValue(AvatarSourceProperty);
        set => SetValue(AvatarSourceProperty, value);
    }

    // 自动同步属性到UI（也可以直接在AXAML里用绑定替代）
    protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
    {
        base.OnPropertyChanged(change);
        if (change.Property == UserNameProperty)
            UserNameText.Text = UserName;
        else if (change.Property == AvatarSourceProperty)
            ProfileAvatar.Source = AvatarSource;
    }
}

更简洁的方式：直接在AXAML里绑定属性，省去OnPropertyChanged逻辑，比如把<TextBlock Text="{Binding UserName, RelativeSource={RelativeSource AncestorType=UserControl}}" />

3. 暴露自定义事件（对应React的回调Props）

在C#类中定义事件，在内部控件触发时向外传递：

// 自定义Follow事件，外部可通过<UserProfileCard Followed="HandleFollow" />绑定
public event EventHandler? Followed;

private void FollowButton_Click(object? sender, Avalonia.Interactivity.RoutedEventArgs e)
{
    // 触发事件，传递给父组件
    Followed?.Invoke(this, EventArgs.Empty);
}

记得在AXAML的Button上绑定点击事件：<Button ... Click="FollowButton_Click" />

4. 父组件中使用该UserControl

就像在React中引用组件一样，直接在父AXAML中使用，并传递属性、绑定事件：

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="clr-namespace:YourApp.Controls"
        x:Class="YourApp.MainWindow">
  <StackPanel Padding="20" Spacing="16">
    <controls:UserProfileCard 
        UserName="John Doe" 
        AvatarSource="{Binding JohnAvatar}"
        Followed="UserProfileCard_Followed" />
  </StackPanel>
</Window>

父组件的C#处理事件：

private void UserProfileCard_Followed(object? sender, EventArgs e)
{
    // 执行关注逻辑
}

额外区分：UserControl vs TemplatedControl #

• UserControl：适合固定结构的复合UI，结构由你封装时定义，使用者只传数据和绑定事件，和React中常规组件完全一致。
• TemplatedControl：适合需要允许使用者自定义内部布局的控件（比如你做一个通用卡片，允许别人替换头像的位置、按钮样式），类似React中支持slot/render props的组件，如果你不需要这种高度定制，UserControl足够用。

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