组件

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。

与其他框架中的组件不同，Refina 中的组件不被用于将应用分成几个部分，对于这种需求，请使用视图。

组件的种类

Refina 中有3种组件：

• 输出型组件：只负责渲染页面内容的组件。 如：h1, p...
• 事件型组件：会触发一个事件的组件。 如：button, input...
• 状态型组件：含有一个状态的组件。 如：checkbox, radio...

INFO

以上三种是常用的组件种类。

组件的底层实现是一个上下文函数。 所以创建一个不属于上述种类的组件是完全可行的。

额外的 props

有时一个组件有很多可选的 props。这使得将这些 props 通过组件函数参数传入十分不便。 这时我们可以使用 _.$props 指令 向下一个组件以按名称传入的方式添加多个额外的 prop。

$app([MdUI], _ => {
  _.$props({
    icon: "person",
    endIcon: "arrow_forward",
  });
  _.mdChip("Student", true);
});

INFO

额外的 props 都是可选的。

INFO

额外的 props 与组件的参数以完全不同的方式定义。

因此你不能将额外的 props 以组件函数参数的方式传入，反之亦然。

主元素

如果组件渲染了一个 DOM 元素（不包括文本节点），它就有一个主元素。主元素可以通过 componentInstance.$primaryEl 属性获得。

如果一个组件不包括任何非文本节点的 DOM 元素，那么它的主元素的值为 undefined。

主元素应当是组件的视觉核心。 向组件添加的类名与样式将被设置在主元素上。 组件的底层实现是一个上下文函数。 所以创建一个不属于上述种类的组件是完全可行的。

组件可以通过调用 this,$primary() 指令来设置下一个元素为主元素。 默认地，组件渲染的第一个元素将被视为组件的主元素。 默认地，组件渲染的第一个元素将被视为组件的主元素。

INFO

通过底层渲染函数渲染的元素也有主元素，即它们自身。