FAQ

React: solución de problemas

El widget se queda vacío

Comprueba primero que usas el nombre de componente exportado y que todas las opciones están en data. El <a href="/docs/react/intro/react-components">resumen de componentes</a> muestra los exports disponibles.

Una altura de 100% solo funciona en un contenedor padre con altura calculable. Para acotar el problema empieza con height: "320px". En Table cada columna necesita un ancho, al menos una fraction.

Un clic no dispara el callback

Activa la posibilidad de clic en el sitio correcto: por ejemplo en la fila de la tabla, una tarjeta Kanban o un step. Revisa la firma del callback en la referencia del widget. Un ID no es una posición de callback; algunos eventos entregan índices, otros valores.

Tras guardar, la vista salta atrás

Lleva el resultado confirmado al estado de React y deriva de él un nuevo objeto data. El widget no guarda solo en tu base de datos. En Kanban, onItemDrop debe devolver la promesa de guardado.

TypeScript no reconoce un callback o un slot JSX

Estas referencias pertenecen a 0.1.0-alpha.5. Compara tu versión instalada y evita copias mezcladas del paquete. Los tipos están en el paquete; no necesitas un paquete extra de tipos de widgets.

Renderizado en servidor

El runtime del widget usa APIs del navegador. En una aplicación con server rendering, impórtalo solo en el navegador. Una marca de solo cliente no basta en todos los frameworks si los módulos ya se evalúan en el servidor. Este ejemplo completo mueve el import de runtime a un efecto; el import de tipos se elimina en el build:

import { useEffect, useState } from 'react';
import type { ComponentType } from 'react';
import type { ArcWidgetButtonProps } from '@arcrider/arcwidgets-react';
export default function Example() {
  const [Button, setButton] =
    useState<ComponentType<ArcWidgetButtonProps> | null>(null);
  const [error, setError] = useState(false);
  useEffect(() => {
    let active = true;
    import('@arcrider/arcwidgets-react')
      .then((module) => {
        if (active) setButton(() => module.ArcWidgetButton);
      })
      .catch(() => {
        if (active) setError(true);
      });
    return () => {
      active = false;
    };
  }, []);
  if (error) return <p role="alert">Widget konnte nicht geladen werden.</p>;
  return Button ? (
    <Button
      data={{
        title: 'Bereit',
      }}
    />
  ) : (
    <p>Widget lädt …</p>
  );
}

Como alternativa usa el mecanismo de tu framework que desactiva explícitamente el server rendering para este componente. Un placeholder estable evita saltos de layout.

React Strict Mode

El desarrollo puede montar y desmontar componentes varias veces. Dispara los guardados desde callbacks de interacción, no al renderizar. Asigna IDs propios estables solo donde los necesites; el mismo ID no puede aparecer a la vez más de una vez en el documento.

Un aviso de licencia sigue visible

Registrar el dominio en el portal no basta. Copia el fragmento de licencia del proyecto en la app. Consulta <a href="/docs/react/faq/react-paket-und-lizenzierung">paquete y licencias</a>.