問題タブ [stenciljs]

「window:keydown」をリッスンするコンポーネントのテストを書いています。いくつかの方法を試しましたが、どれもうまくいきません:

代わりに正しい構文は何ですか?

jestを使用して次の関数をテストしようとしています:

この関数のテスト ケースを作成するために、window.fetch関数、関数contentApi、idおよび関数をモックしましたassignContent。次に、必要な関数と変数をすべてモックして、テスト ケース内でこの関数を呼び出そうとしました。

テスト ケースのスニペットを次に示します。

失敗しており、コンテンツを として設定すること'abc'も、呼び出すこともありませんassignContent()。

私の stenciljs render 関数は現在、次のようにタイプスクリプトで書かれています:

しかし、私はそれを次のように書くことができれば好きです：

しかし、これにより多くのエラーメッセージが表示されます。

条件付きの開始タグと終了タグを持つように jsx コードを記述する方法はありますか?

次のプロジェクトがあります。

https://github.com/napolev/stencil-cannot-find-name

次の 2 つのファイルが含まれています。

custom-container.tsx

custom-details.tsx

私の問題は次のとおりです。

次のエラーが表示されます。

次の画像でわかるように：

また、次の画像でわかるようにnpm、でコンパイルする前でも、その問題について通知されます。Visual Studio Code

問題を引き起こしている行は次のとおりです。

https://github.com/napolev/stencil-cannot-find-name/blob/master/src/components.d.ts#L66

上記のファイルはauto-generatedであるため、問題を修正するために変更することはできません。

これを解決する方法について何か考えはありますか？

ありがとう！

Shadow DOM の使用が Stenciljs のコンポーネント ライフサイクル メソッドにどのように影響するかを理解しようとしています。

Stencil スターター アプリで次の例を設定しました。

コンポーネントは次のように定義されます。

各コンポーネントには、ライフサイクル メソッドごとにコンソール ステートメントがあります。Shadow DOM がオンになっているコンポーネントを使用せずにページがブラウザにロードされたとき。

component-a で Shadow DOM をオンにすると、レンダリングが変更されます。

コンソール出力が次のように変わります。

component-a と component-c の両方がレンダリングされる前に、component-b がレンダリングされるようになりました。Shadow DOM を使用したページのレンダリングがこの変更にどのように影響するかはわかりません。

現在、StencilJS を使っていくつかの Web コンポーネントを作成しようとしています。

<slot />これで、名前付きスロットとそのすべてが存在することがわかりました。React から来ているので、slot は React の子に似ていると思います。React では子を使用して多くのことができます。私がよくしたこと：

1. 子供がいるかどうかを確認する
2. 子を繰り返し処理して、各子に何かを行います (たとえば、クラスを含む div でラップします)。

slot/web components/stencilJS を使用してそれを行うにはどうすればよいでしょうか?

Stencil を使用して、Web コンポーネントのホスト要素を取得できます。

私は自分のコンポーネントを次のように使用します

次のようなものをレンダリングしたい

敬具