BaseClientSideWebPart class

Paquete:

@microsoft/sp-webpart-base

Esta clase abstracta implementa la funcionalidad base de un elemento web del lado cliente. Cada elemento web del lado cliente debe heredar de esta clase.

Extends

BaseWebPart<TProperties>

Comentarios

Junto con las funciones básicas, esta clase proporciona algunas API que puede usar el elemento web. Estas API se dividen en dos categorías.

La primera categoría de API proporciona datos y funcionalidad. Por ejemplo, el contexto del elemento web (es decir, this.context). Esta API se debe usar para tener acceso a datos contextuales pertinentes para esta instancia del elemento web.

La segunda categoría de API proporciona una implementación base para el ciclo de vida del elemento web y se puede invalidar para una implementación actualizada. La API render() es la única API que un elemento web debe implementar o invalidar obligatoriamente. Todas las demás API de ciclo de vida tienen una implementación base y pueden invalidarse en función de las necesidades del elemento web. Consulte la documentación de cada API para tomar la decisión correcta.

Constructores

(constructor)()

Constructor de la clase BaseClientSideWebPart.

Propiedades

canOpenPopupOnRender	Esta propiedad indica si un elemento web puede abrir un elemento emergente en la representación inicial.
context	Use el objeto de contexto para acceder a los servicios comunes y al estado asociados al componente.
domElement	Esta propiedad es un puntero al elemento DOM raíz del elemento web. Se trata de un elemento DIV que contiene todo el subárbol DOM del elemento web.
isRenderAsync	Indica si el elemento web está representando en modo asincrónico.
renderedFromPersistedData	Esta propiedad indica si el elemento web se representó a partir de los datos persistentes (estado serializado desde la última vez que se guardó el elemento web) o no.
renderedOnce	Esta propiedad indica si el elemento web se ha representado una vez o no. Después de la primera representación, el valor de esta propiedad siempre es true hasta que se produce una representación completa del elemento web.
width	Esta propiedad devuelve el ancho del contenedor para el elemento web.

Métodos

clearError()	Esta API se debe usar para borrar el mensaje de error del área de visualización del elemento web.
onAfterResize(newWidth)	Esta API se invoca cuando se cambia el ancho del elemento dom del contenedor de elementos web, por ejemplo, cuando se cambia el tamaño de la ventana del explorador del explorador y cuando se activa o cierra el panel de propiedades.
onDisplayModeChanged(oldDisplayMode)	Se llama a este método de evento cuando se cambia el modo de presentación de un elemento web.
onDispose()	Esta API se debe usar para actualizar el contenido del panel de propiedades.
onThemeChanged(theme)	Se llama a esta API cuando se inicializa o cambia un tema en la página o en la sección actual.
render()	Se llama a esta API para representar el elemento web. No hay ninguna implementación base de esta API y es necesario que el elemento web invalide la API.
renderCompleted(error, didUpdate)	Los elementos web que realicen la representación asincrónica deberían llamar a esta API. Es necesario que dichos elementos web invaliden la API isRenderAsync y devuelvan true. Un ejemplo de ello son los elementos web que representan contenido en un IFrame. El elemento web inicia la representación de IFrame en la render() API, pero la representación real solo se completa una vez completada la carga de iframe.
renderError(error)	Esta API se debe usar para representar un mensaje de error en el área de visualización del elemento web. También registra el mensaje de error mediante el registrador de seguimiento.

Detalles del constructor

(constructor)()

Constructor de la clase BaseClientSideWebPart.

constructor();

Comentarios

Se recomienda encarecidamente que el elemento web use la onInit() API para realizar cualquier inicialización específica del elemento web. La mayoría de las características del elemento web como this.context y this.properties no están disponibles para usarse antes del onInit() elemento del ciclo de vida de carga del elemento web.

Detalles de las propiedades

canOpenPopupOnRender

Esta propiedad indica si un elemento web puede abrir un elemento emergente en la representación inicial.

protected get canOpenPopupOnRender(): boolean;

Valor de propiedad

boolean

Comentarios

En algunos entornos, el host vuelve a representar los elementos web con frecuencia y, por tanto, la apertura de elementos emergentes durante la representación hará que los elementos emergentes se abran repetidamente, lo que supone una experiencia de usuario deficiente. Por ejemplo, las páginas clásicas de SharePoint realizan postbacks, lo que hace que la página se vuelva a representar en todos los clics del botón.

Si un elemento web necesita abrir un elemento emergente en la representación, debe usar esta API antes de abrir el elemento emergente. Si esta API devuelve false, el elemento web no debe abrir el elemento emergente en la representación inicial. Algunos elementos web que abren elementos emergentes durante la representación son el elemento web de inserción de documentos que abre el selector de archivos en la representación inicial, elemento web de vídeo incrustado que aparece en el panel de propiedades en la representación inicial.

context

Use el objeto de contexto para acceder a los servicios comunes y al estado asociados al componente.

readonly context: WebPartContext;

Valor de propiedad

WebPartContext

Comentarios

Se espera que las clases secundarias invaliden este campo al volver a declararlo con un tipo especializado. Está pensado para ser una propiedad de solo lectura; el tipo no se puede declarar como de solo lectura en la clase base (porque se inicializa fuera del constructor), pero las clases secundarias deben volver a declararlo como readonly.

domElement

Esta propiedad es un puntero al elemento DOM raíz del elemento web. Se trata de un elemento DIV que contiene todo el subárbol DOM del elemento web.

protected get domElement(): HTMLElement;

Valor de propiedad

HTMLElement

isRenderAsync

Indica si el elemento web está representando en modo asincrónico.

/** @virtual */
protected get isRenderAsync(): boolean;

Valor de propiedad

boolean

Comentarios

Si el elemento web invalida este campo para que devuelva true, debe llamar a la API renderCompleted una vez finalizada la representación del elemento web.

El valor predeterminado es False.

renderedFromPersistedData

Esta propiedad indica si el elemento web se representó a partir de los datos persistentes (estado serializado desde la última vez que se guardó el elemento web) o no.

protected get renderedFromPersistedData(): boolean;

Valor de propiedad

boolean

Comentarios

Ejemplo: Cuando el elemento web se agrega por primera vez mediante el cuadro de herramientas, el valor es false.

renderedOnce

Esta propiedad indica si el elemento web se ha representado una vez o no. Después de la primera representación, el valor de esta propiedad siempre es true hasta que se produce una representación completa del elemento web.

protected get renderedOnce(): boolean;

Valor de propiedad

boolean

width

Esta propiedad devuelve el ancho del contenedor para el elemento web.

protected get width(): number;

Valor de propiedad

number

Comentarios

Los elementos web deben usar esta propiedad para realizar operaciones como cualquier estilo condicional de componentes en función del ancho inicial disponible para el elemento web.

Detalles del método

clearError()

Esta API se debe usar para borrar el mensaje de error del área de visualización del elemento web.

protected clearError(): void;

Devoluciones

void

onAfterResize(newWidth)

Esta API se invoca cuando se cambia el ancho del elemento dom del contenedor de elementos web, por ejemplo, cuando se cambia el tamaño de la ventana del explorador del explorador y cuando se activa o cierra el panel de propiedades.

/** @virtual */
protected onAfterResize(newWidth: number): void;

Parámetros

newWidth

number

Ancho (en píxeles) del contenedor del elemento web después del evento de cambio de tamaño.

Devoluciones

void

Comentarios

Los elementos web deben usar este método para realizar operaciones como, por ejemplo, volver a representar componentes en función del nuevo ancho disponible para el elemento web.

onDisplayModeChanged(oldDisplayMode)

Se llama a este método de evento cuando se cambia el modo de presentación de un elemento web.

/** @virtual */
protected onDisplayModeChanged(oldDisplayMode: DisplayMode): void;

Parámetros

oldDisplayMode

DisplayMode

Modo de presentación anterior.

Devoluciones

void

Comentarios

La implementación predeterminada de esta API llama al método de representación del elemento web para volver a representar el elemento web con el nuevo modo de presentación. Si un desarrollador de elementos web no quiere que se produzca una nueva representación completa al cambiar el modo de presentación, puede invalidar esta API y realizar actualizaciones específicas en el DOM del elemento web para cambiar su modo de presentación.

Si el elemento web se inicializa o se vuelve a inicializar al cambiar a un modo de presentación diferente, no se llama a este método de ciclo de vida. Ejemplo: Página de sitio de SharePoint.

onDispose()

Esta API se debe usar para actualizar el contenido del panel de propiedades.

/** @virtual */
protected onDispose(): void;

Devoluciones

void

Comentarios

Se llama a esta API al final del ciclo de vida del elemento web en una página. Debe usarse para eliminar los recursos locales (es decir, elementos DOM) que el elemento web mantiene. Se espera una llamada a esta API en escenarios como la navegación por páginas, es decir, el host realiza la transición de una página a otra y elimina la página de la que sale.

onThemeChanged(theme)

Se llama a esta API cuando se inicializa o cambia un tema en la página o en la sección actual.

/** @virtual */
protected onThemeChanged(theme: IReadonlyTheme | undefined): void;

Parámetros

theme

IReadonlyTheme | undefined

Nuevo tema para la página o sección

Devoluciones

void

Comentarios

Los desarrolladores no llamaron a render en el método invalidado. Puede dar lugar a un re-flujo no procesado del elemento web. Se llamará a render desde la clase base cuando sea necesario.

render()

Se llama a esta API para representar el elemento web. No hay ninguna implementación base de esta API y es necesario que el elemento web invalide la API.

protected abstract render(): void;

Devoluciones

void

renderCompleted(error, didUpdate)

Los elementos web que realicen la representación asincrónica deberían llamar a esta API. Es necesario que dichos elementos web invaliden la API isRenderAsync y devuelvan true. Un ejemplo de ello son los elementos web que representan contenido en un IFrame. El elemento web inicia la representación de IFrame en la render() API, pero la representación real solo se completa una vez completada la carga de iframe.

protected renderCompleted(error?: Error, didUpdate?: boolean): void;

Parámetros

error

Error

objeto de error que indica que la representación asincrónica se ha completado con un error

didUpdate

boolean

se usa para invalidar el tiempo de rendimiento final con el tiempo de representación de sincronización

Devoluciones

void

renderError(error)

Esta API se debe usar para representar un mensaje de error en el área de visualización del elemento web. También registra el mensaje de error mediante el registrador de seguimiento.

protected renderError(error: Error): void;

Parámetros

error

Error

Objeto de error que contiene el mensaje de error que se va a representar.

Devoluciones

void