The viewer and designer can be combined into one edit-and-preview flow, switching between them with React state.

Toggle the two components with state.
function App() {
    const [isViewer, setIsViewer] = useState(true);

    function onDesignReport(args) { setIsViewer(false); }
    async function onExitDesigner() { await report.renderAsync2(); setIsViewer(true); }

    return isViewer
        ? <Viewer options={viewerOptions} report={report}
                  onDesignReport={onDesignReport} onOpenedReport={onOpenedReport} />
        : <Designer options={designerOptions} report={report}
                    onExit={onExitDesigner} onAssignedReport={onAssignedReport} />;
}

How it works. React state chooses which component renders, so users move from preview to editing and back within one screen.

Используя этот сайт, вы соглашаетесь на использование файлов Cookie для аналитики и персонализированного контента. Файлы Cookie хранят полезную информацию на вашем компьютере, чтобы помочь нам повысить эффективность и удобство использования. Для получения дополнительной информации, пожалуйста, прочтите Конфиденциальность и Использование Cookie.