17

我目前正在尝试使用 StencilJS 创建一些 Web 组件。

现在我知道有<slot />并命名插槽和所有这些东西。来自 React，我猜 slot 类似于 React 中的 children。你可以在 React 中使用孩子做很多事情。我经常做的事情：

  1. 检查是否提供任何儿童
  2. 遍历孩子以对每个孩子做一些事情（例如，将其包装在带有类的 div 中等）

你会如何使用 slot/web components/stencilJS 做到这一点？

我可以使用 Stencil 在 Stencil 中获取我的 Web 组件的主机元素

@Element() hostElement: HTMLElement;

我使用我的组件

<my-custom-component>
  <button>1</button>
  <button>2</button>
  <button>3</button>
</my-custom-component>

我想渲染类似的东西

render() {
  return slottedChildren ?
    <span>No Elements</span> :
    <ul class="my-custom-component">
      slottedChildren.map(child => <li class="my-custom-element>{child}</li>)
    </ul>;
}

亲切的问候

4

2 回答 2

17

使用插槽，您无需在渲染函数中添加条件。您可以将 no children 元素（在您的示例中为 span）放在 slot 元素内，如果没有为 slot 提供子元素，它将退回到它。例如：

render() {
    return (
        <div>
            <slot><span>no elements</span></slot>
        </div>
    );
}

回答你写的评论 - 你可以做这样的事情，但需要一些编码而不是开箱即用。每个插槽元素都有一个assignedNodes功能。使用这些知识和对 Stencil 组件生命周期的理解，您可以执行以下操作：

import {Component, Element, State} from '@stencil/core';

@Component({
    tag: 'slotted-element',
    styleUrl: 'slotted-element.css',
    shadow: true
})
export class SlottedElement {
    @Element() host: HTMLDivElement;
    @State() children: Array<any> = [];

    componentWillLoad() {
        let slotted = this.host.shadowRoot.querySelector('slot') as HTMLSlotElement;
        this.children = slotted.assignedNodes().filter((node) => { return node.nodeName !== '#text'; });
    }

    render() {
        return (
            <div>
                <slot />
                <ul>
                    {this.children.map(child => { return <li innerHTML={child.outerHTML}></li>; })}
                </ul>
            </div>
        );
    }
}

这不是最佳解决方案，它要求插槽的样式应将 display 设置为 none（因为您不想显示它）。此外，它只适用于只需要渲染而不需要事件或其他任何东西的简单元素（因为它只将它们用作 html 字符串而不是对象）。

于 2018-09-21T05:30:30.043 回答
5

谢谢吉尔的回答。

我之前也在考虑类似的事情（设置状态等 - 因为可能会出现时间问题）。不过我不喜欢这个解决方案，因为您随后会在 componentDidLoad 中进行状态更改，这将在组件加载后立即触发另一个加载。这似乎肮脏和无能。

不过，一点点innerHTML={child.outerHTML}帮助了我很多。

似乎您也可以简单地执行以下操作：

import {Component, Element, State} from '@stencil/core';

@Component({
    tag: 'slotted-element',
    styleUrl: 'slotted-element.css',
    shadow: true
})
export class SlottedElement {
    @Element() host: HTMLDivElement;

    render() {
        return (
            <div>
                <ul>
                    {Array.from(this.host.children)
                          .map(child => <li innerHTML={child.outerHTML} />)}
                </ul>
            </div>
        );
    }
}

我认为您可能会遇到时间问题，因为在此期间render()，主机的子元素已被删除，以便为任何render()返回腾出空间。但是由于 shadow-dom 和 light-dom 在宿主组件中很好地共存，我想应该没有任何问题。

我真的不知道为什么你必须使用innerHTML。来自 React 我习惯做：

{Array.from(this.host.children)
      .map(child => <li>{child}</li>)}

我认为这是基本的 JSX 语法，因为 Stencil 也在使用 JSX，所以我也可以这样做。虽然不起作用。innerHTML对我有用。再次感谢。

编辑：如果你不使用 shadow-dom，我提到的时间问题就会出现。一些奇怪的事情开始发生，你最终会得到很多重复的孩子。虽然你可以这样做（可能有副作用）：

import {Component, Element, State} from '@stencil/core';

@Component({
    tag: 'slotted-element',
    styleUrl: 'slotted-element.css',
    shadow: true
})
export class SlottedElement {
    children: Element[];

    @Element() host: HTMLDivElement;

    componentWillLoad() {
      this.children = Array.from(this.host.children);
      this.host.innerHTML = '';
    }

    render() {
        return (
            <div>
                <ul>
                    {this.children.map(child => <li innerHTML={child.outerHTML} />)}
                </ul>
            </div>
        );
    }
}
于 2018-09-21T14:33:46.990 回答