使用 javascript 在 BaseClientSideWebPart 的渲染函数中添加代码

Question

我正在为共享点创建自定义客户端 Web 部件。在编辑面板中，当单击按钮时，我想在渲染方法中的代码之后添加更多的 html，但是当代码附加到渲染方法中的 html 时，它会立即被删除并替换为硬编码的内容。

export default class ContentCardWebPart extends BaseClientSideWebPart<IContentCardWebPartProps> {

  public render() {
    this.domElement.innerHTML = `
      <div class="${ styles.contentCard }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div id="contentCard" class="${ styles.column }">
              <span class="${ styles.title }">Welcome to SharePoint!</span>
              <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
              <p class="${ styles.description }">${escape(this.properties.description)}</p>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>`;
  }


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

  private ButtonClick() {
    var myDiv = document.createElement("div");
    myDiv.innerHTML = `<div>${this.properties.description}</div>`;
    document.getElementById("contentCard").appendChild(myDiv);
  }

按钮单击方法链接到出现在编辑面板中的按钮，并且在将代码附加到 document.body 时起作用，但不适用于呈现函数中存在的任何代码。请帮助我如何使用 JavaScript 修改此代码？

Answer 1

您需要开启非响应式模式，在您的 Web 部件中添加以下代码：

protected get disableReactivePropertyChanges(): boolean {
  return true;
}

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/integrate-with-property-pane#handle-field-changes