标签: stenciljs

我的 stenciljs 渲染函数目前是用打字稿这样编写的：

render() {
  if( this._isInline ) {
    return (
      <span>
        <slot />
      </span>
    );
  } else {
    return (
      <div>
        <slot />
      </div>
    );
  }
}

但我更喜欢如果我能写成这样：

render() {
  const tag = this._isInline ? 'span' : 'div';
  return (
    <{tag}>
      <slot />
    </{tag}>
  );
}

但这给了我一堆错误消息。

有没有办法编写 jsx 代码，以便我有条件打开和关闭标记？

我想开始利用现在所有主要 Web 浏览器都支持的http://webcomponents.me W3C 标准。

我研究了互联网，到目前为止我发现了以下框架：

1. 模板 - 由离子创建。所有离子组件都使用这个框架/编译器来构建原生支持的 Web 组件。

2. lit-element - 由 Google 创建，是 Polymer 框架的一部分。

3. SkateJS - 不知道这背后的原因，但它位于前 3 名流行的 Web 组件框架中。

有人可以给我建议或意见哪个框架最好吗？

我使用 Stencil 创建了一个输入 Web 组件：

...
export class Input {
    @Prop({ mutable: true }) value: string;
    @Event() changed: EventEmitter<KeyboardEvent>;

    private handleChange (e) {
        this.value = e.target?.value;
        this.changed.emit(e);
    }

    render() {
        return (
            <div class="inputContainer">
                <input  
                    type="text"
                    value={this.value}
                    onInput={this.handleChange}
                />
            </div>
        )
    }
}

然后尝试在 React jsx 文件中使用它后，onChanged 不会调用 console.log

...

function App() {
  return (
    <div className="App">
      // does not call console.log
      <ui-input onChanged={(e) => console.log(e)}/>
    </div>
  );
}

正如我到目前为止所读到的，这是因为 React 使用合成事件而不是 Dom 事件。

有没有办法在 JSX 元素中使用 Dom 事件？

我有两个 Stencil JS Web 组件库：library-a 和library-b。这些不是应用程序，只是单独的 npm 组件包。

我想使用库 b 中库 a 中的一些组件。如何将组件从 A 导入到 B 中？

StencilJS 文档提供了一些导入说明，但不涵盖这个特定的用例。

我有一个看起来像这样的模板组件：

    export class MyBadge {\n      @Prop() skin: string = \'primary\';\n      render(){\n        return (\n        <span class={`skin-${this.skin}`} />\n      )\n

我想编写一个单元测试来检查渲染的组件是否应用给定的skin属性。\n我有一个测试将渲染的组件与我预期的 html 进行比较，使用expect(page.root).toEqualHtml(\xc2\xb4< span class=primary >\xc2\xb4).此测试有效！但是，当我尝试使用模板修改道具时，它无法运行测试。

    import { newSpecPage } from \'@stencil/core/testing\';\n    import { MyBadge } from \'./my-badge\'\n    it(\'should have "secondary" skin\', async () => {\n     const page = newSpecPage({\n            components: [MyBadge],\n            template: () => (`\n              <my-badge skin=secondary></my-badge>\n              `), \n          });\n          expect(page.root).toEqualHtml(`\n          <span class="skin-secondary">\n          ...\n          `);\n        });\n

这给出了错误expect toEqualHtml() value is "null"并且测试失败

当两者看起来完全相同时，Jest 会认为这不完全相同吗？

所以这是我用来进行测试的代码，它基本上只是一个调用事件发射器的函数，在事件发射器中，如果日期无效，我会按原样设置：

  const datepickerComponent: Datepicker = new Datepicker();

  const mockEvent = {
    target: {
      classList: {
        remove: jest.fn(),
        add: jest.fn(),
      },
      value: '01-01-197',
    },
  } as unknown as InputEvent;

  datepickerComponent.onInput(mockEvent);

  const emitMock: jest.Mock = jest.fn();
  datepickerComponent.dsdDatepickerInputChange = { emit: emitMock } as unknown as EventEmitter<dsdDatepickerInputChangeEvent>;

  // when
  datepickerComponent.onInput(mockEvent);

  const dateValue = new Date('197-01-01T00:00:00');

  // then
  expect(emitMock).toHaveBeenCalledWith({ value: '197-01-01', valueAsDate: dateValue });

我的目标是在分发包中提供一个 css 文件，如果需要的话，消费者可以使用它。

为此，我想创建一种全局 scss 文件，但我想避免这种样式附加到每个组件+它也不会被组件直接使用。因此，我想my-style.scss在文件夹中的某个位置创建文件/src。

my-style.css编译此文件并将其复制到文件夹的最佳方法是什么dist？

我想传递一个对象数组，然后迭代该数组并渲染每个对象。

我的 html 文件如下：

<stencil-component 
   cards = '[{"cardTitle"="placeholder", "copy"="copy1"},{"cardTitle"="placeholder2", "copy"="copy3"}]'>
</stencil-component>

在我的 tsx 文件中，我有以下内容：

@Prop() cards: Array<object> = [];

render(){
    return  (
      {this.cards.map(card) => {

        return (
          <div>
            <h1>{card.cardTitle}</h1>
            <p>{card.copy}</p>
          </div>
        );
      })}    
    )
}

我什至无法显示数组。我尝试使用 JSON.parse 函数来解析数据，但这也不起作用。如果有人可以帮忙，我将非常感激！

我目前正在编写一个带有ref元素的 StencilJS 组件，我需要将其作为 @Prop 传递给另一个元素。就像这样：

<canvas ref={el => this.canvas = el}></canvas>
<color-picker canvas={this.canvas}></color-picker>

当创建颜色选择器时，this.canvas仍然未定义，导致 中出现错误color-picker。

我怎样才能在 JSX 中做到这一点？

我正在 StencilJS 中构建一个具有工具提示的组件。

我想在 document.body 中附加此工具提示的标记，而不是在我的组件中，因为当组件包含在带有 Overflow:hidden 的元素中时，它会遇到问题（工具提示被截断）

有什么办法可以实现这一点吗？

我在 React 中有完全相同的组件，我设法通过使用修复它，ReactDOM.createPortal(tooltip, document.body)但我似乎无法在 Stencil 中找到类似的解决方案（另外，文档非常基础）。

我还尝试手动生成元素，document.createElement但这很痛苦而且太冗长，而且我有几个图标作为我想包含的组件。

另一种解决方案是将 JSX 转换为实际标记，然后我可以通过执行document.body.append(tooltip).