添加 JQuery 在 Stencil/Electron 中切换 Class

Question

我正在使用模板构建电子应用程序。当我单击一个按钮时，我想让一个 div-容器可见。我导入了 jQuery 库，但该函数没有生成 toggleClass 方法。它只显示 console.log()。有人可以帮助我吗？

my-component.tsx代码：

import { Component, Prop, Listen} from '@stencil/core';
import $ from 'jquery';


@Component({
  tag: 'aufklapp-button',
  styleUrl: 'aufklapp-button.css',
  shadow: true
})


export class AufklappButton {

  @Prop() test: string;

  @Listen('click',  { capture: true }) 
  buttonClickedHandler(){
    $(document).ready(function(){
      $(".aufklapp-button").click(function(){
        $(".aufklapp-container").toggleClass("shown");
        $(".aufklapp-button").toggleClass("changeradius");
      });
    });
    console.log('hi')
  }

  render() {
    return (
      <div id="container-button">
        <input class="aufklapp-button" type="button" value="Platzhalter für Kategorie"></input>
        <div class="aufklapp-container">
          <table class="table">
            <tbody>
              <tr>
                <td></td>
                <td>Zielerreichung in %</td>
              </tr>
              <tr>
                <td>Kriterium 1</td>
                <td>Regler</td>
              </tr>
              <tr>
                <td>Kriterium 2</td>
                <td>Regler</td>
              </tr>     
              <tr>
                <td>Kriterium 3</td>
                <td>Regler</td>
              </tr>
              <tr>
                <td>Kriterium 4</td>
                <td>Regler</td>
              </tr>                      
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

Answer 1

你并不真的需要 jQuery，Stencil.js 提供了你实现它所需的所有开箱即用的 API，它将使你的代码更容易理解。

您的代码仅记录 "hi" 而未执行任何操作的原因是您试图向 .aufklapp-button 添加点击处理程序，但 $('.aufklapp-button') 永远找不到该元素，因此永远不要附加点击监听器，因为您已经为您的组件启用了 Shadow DOM，这在设计上将使您的组件内部无法从外部访问。

无论如何，您正在组件主机上使用 click 事件侦听器来附加所述侦听器，这意味着您的按钮只有在您单击该组件一次后才会起作用（如果 jQuery 本来可以找到您的按钮，但事实并非如此。

您应该改为使用元素的 onClick 属性直接将点击处理程序附加到按钮。然后，您可以使用该点击处理程序来简单地切换组件的状态成员 class，然后使用该状态成员来切换呈现模板中带有条件的 CSS classes。

我在您的代码中注意到的另一个问题是您没有导入自 Stencil v1.0.0 以来所必需的 h（如果您正在使用它）。

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

@Component({
  tag: 'aufklapp-button',
  styleUrl: 'aufklapp-button.css',
  shadow: true
})
export class AufklappButton {
  @Prop() test: string;

  @State() visible = false;

  toggleVisibility = () => {
    this.visible = !this.visible;
  }

  render() {
    return (
      <div id="container-button">
        <input
          onClick={this.toggleVisibility} // <-- attaching the listener here
          class={{
            'aufklapp-button': true,
            changeradius: this.visible // <-- using an object to toggle the class here
          }}
          type="button"
          value="Platzhalter für Kategorie"
        />
        <div
          class={{
            'aufklapp-container': true,
            shown: this.visible // <-- and also here
          }}
        >
          <table class="table">
            <tbody>
              <tr>
                <td></td>
                <td>Zielerreichung in %</td>
              </tr>
              <tr>
                <td>Kriterium 1</td>
                <td>Regler</td>
              </tr>
              <tr>
                <td>Kriterium 2</td>
                <td>Regler</td>
              </tr>     
              <tr>
                <td>Kriterium 3</td>
                <td>Regler</td>
              </tr>
              <tr>
                <td>Kriterium 4</td>
                <td>Regler</td>
              </tr>                      
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

我建议您通读 Stencil 组件 API 文档，以更好地了解您可以使用不同的装饰器和生命周期事件做什么。你可以在这里找到它：

https://stenciljs.com/docs/decorators

添加 JQuery 在 Stencil/Electron 中切换 Class

Add JQuery Toggle Class in Stencil/Electron

javascript

jquery

electron

stenciljs