使用函数式组件

函数式组件与普通的 Stencil Web 组件完全不同，因为它们是 JSX 编译器的一部分。函数式组件基本上是一个函数，它接受一个 props 对象并将其转换为 JSX。

const Hello = props => <h1>Hello, {props.name}!</h1>;

当 JSX 转译器遇到这样的组件时，它会获取它的属性，将它们作为 props 对象传递给函数，并用函数返回的 JSX 替换该组件。

<Hello name="World" />

函数式组件也接受第二个参数 children。

const Hello = (props, children) => [
  <h1>Hello, {props.name}</h1>,
  children
];

JSX 转译器将组件的所有子元素作为数组传递到函数的 children 参数中。

<Hello name="World">
  <p>I'm a child element.</p>
</Hello>

Stencil 提供了一个 FunctionalComponent 泛型类型，允许为组件的属性指定一个接口。

// Hello.tsx

import { FunctionalComponent, h } from '@stencil/core';

interface HelloProps {
  name: string;
}

export const Hello: FunctionalComponent<HelloProps> = ({ name }) => (
  <h1>Hello, {name}!</h1>
);

使用子组件

函数式组件的第二个参数接收传递的子组件，但为了使用它们，FunctionalComponent 提供了一个 utils 对象，该对象公开了一个 map() 方法来转换子组件，以及 forEach() 来读取他们。不推荐读取 children 数组，因为模板编译器可以在 prod 模式下重命名 vNode 属性。

export interface FunctionalUtilities {
  forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
  map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
}
export interface ChildNode {
  vtag?: string | number | Function;
  vkey?: string | number;
  vtext?: string;
  vchildren?: VNode[];
  vattrs?: any;
  vname?: string;
}

Example:

export const AddClass: FunctionalComponent = (_, children, utils) => (
  utils.map(children, child => ({
    ...child,
    vattrs: {
      ...child.vattrs,
      class: `${child.vattrs.class} add-class`
    }
  }
  ))
);