Добавьте код в функцию рендеринга BaseClientSideWebPart с помощью javascript

#typescript #sharepoint #client-side #web-parts

#typescript #sharepoint #на стороне клиента #веб-части

Вопрос:

Я создаю пользовательскую веб-часть на стороне клиента для sharepoint. На панели редактирования при нажатии кнопки я хотел бы добавить больше 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?

Ответ №1:

Вам нужно включить нереактивный режим, добавить следующий код в свою веб-часть:

 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

введите описание изображения здесь

Комментарии:

1. Спасибо, в итоге я решил эту проблему, установив внутренний HTML-код DOMElement за один раз без цикла, который использовал =, что, казалось, сработало