Javascript SPFx Web部件-选项卡

我是SPFX Web部件开发的新手

我正在尝试开发一个选项卡Web部件—HTML似乎能够正确呈现，但是Javascript没有启动（可能我使用的方式不正确）

我们将非常感谢您的帮助

提前谢谢

//The webpart.ts file
import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './JqueryWebPart.module.scss';
import * as strings from 'JqueryWebPartStrings';
import MyTabTemplate from './MyTabTemplate';

import * as jQuery from 'jquery';
import 'jqueryui';
import { SPComponentLoader } from '@microsoft/sp-loader';

export interface IJqueryWebPartProps {
  description: string;
}

export default class JqueryWebPart extends BaseClientSideWebPart<IJqueryWebPartProps> {

  public constructor() {
    super();
  
    SPComponentLoader.loadCss('//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css');
  }

  public render(): void {
    this.domElement.innerHTML = MyTabTemplate .templateHtml;
    jQuery('.tabs', this.domElement);

    function openCity(evt, cityName) {
      // Declare all variables
      var i, tabcontent, tablinks;
    
      // Get all elements with class="tabcontent" and hide them
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
    
      // Get all elements with class="tablinks" and remove the class "active"
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
    
      // Show the current tab, and add an "active" class to the button that opened the tab
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " active";
    }
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

//webpart.ts文件
从'@microsoft/sp core library'导入{Version}；
进口{
IPropertyPaneConfiguration，
PropertyPaneTextField
}从“@microsoft/sp属性窗格”；
从'@microsoft/sp webpart base'导入{BaseClientSideWebPart}；
从'@microsoft/sp lodash subset'导入{escape}；
从“./JqueryWebPart.module.scss”导入样式；
将*作为字符串从“jQueryWebPartString”导入；
从“/MyTabTemplate”导入MyTabTemplate；
将*作为jQuery从“jQuery”导入；
输入“jqueryui”；
从'@microsoft/sp loader'导入{SPComponentLoader}；
导出接口IJqueryWebPartProps{
描述：字符串；
}
导出默认类JqueryWebPart扩展BaseClientSideWebPart{
公共构造函数（）{
超级（）；
SPComponentLoader.loadCss（'//code.jquery.com/ui/1.11.4/themes/smoothness/jquery ui.css'）；
}
公共呈现（）：void{
this.doElement.innerHTML=MyTabTemplate.templateHtml；
jQuery（'.tabs'，this.domeElement）；
函数openCity（evt、cityName）{
//声明所有变量
var i，tabcontent，tablinks；
//使用class=“tabcontent”获取所有元素并隐藏它们
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

=================================================

//the template.ts file - holding the html
export default class MyTabTemplate {
    public static templateHtml: string = `
    <div class="tabs">    
        <!-- Tab links -->
        <div class="tab">
        <button class="tablinks" onclick="openCity(event, 'London')">London</button>
        <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
        <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
        </div>

        <!-- Tab content -->
        <div id="London" class="tabcontent">
        <h3>London</h3>
        <p>London is the capital city of England.</p>
        </div>

        <div id="Paris" class="tabcontent">
        <h3>Paris</h3>
        <p>Paris is the capital of France.</p>
        </div>

        <div id="Tokyo" class="tabcontent">
        <h3>Tokyo</h3>
        <p>Tokyo is the capital of Japan.</p>
        </div>
        </div>
    `;
}

//template.ts文件-包含html
导出默认类MyTabTemplate{
公共静态模板HTML:字符串=`
伦敦
巴黎
东京
伦敦
伦敦是英国的首都

巴黎
巴黎是法国的首都

东京
东京是日本的首都

`;
}

您不能直接在render（）中添加函数openCity。您需要将其添加到脚本标记中，如下所示：

  public render(): void {
    this.domElement.innerHTML = MyTabTemplate.templateHtml;
    jQuery(".tabs", this.domElement);

    let head: any =document.getElementsByTagName("head")[0] || document.documentElement,
    script = document.createElement("script");
    script.type = "text/javascript";
    script.text =
      'function openCity(evt, cityName) { var i, tabcontent, tablinks;tabcontent = document.getElementsByClassName("tabcontent");for (i = 0; i < tabcontent.length; i++) {tabcontent[i].style.display = "none";}tablinks = document.getElementsByClassName("tablinks");for (i = 0; i < tablinks.length; i++) {tablinks[i].className = tablinks[i].className.replace(" active", "");}document.getElementById(cityName).style.display = "block";evt.currentTarget.className += " active";}';

    head.insertBefore(script, head.firstChild);
  }

public render（）：void{
this.doElement.innerHTML=MyTabTemplate.templateHtml；
jQuery（“.tabs”，this.domeElement）；
让head:any=document.getElementsByTagName（“head”）[0]| | document.documentElement，
脚本=document.createElement（“脚本”）；
script.type=“text/javascript”；
script.text=
函数openCity（evt，cityName）{var i，tabcontent，tablinks；tabcontent=document.getElementsByClassName（“tabcontent”）；for（i=0；i