Tengo un componente raíz que tiene:

 function aceRender(stepNum: number) { switch (stepNum) { case 1: return (<div><RequestStep1Body /></div>); break; case 2: return (<div><RequestStep2Body /></div>); break; case 3: return (<div><RequestStep3Body /></div>); break; default: break; } } return ( <div ><p> Current Step {step}</p> <div><RequestHeader /></div> {aceRender(step)} </div> );

'paso' es un estado que cuando se cambia desde dentro del componente 'RequestHeader', dibuja el componente secundario apropiado 'RequestStep{n}Body' Pero si el estado se cambia desde dentro del componente RequestStep1Body, RequestStep2Body o RequestStep3Body, el return (<div><RequestStep1Body /></div>); hace que el elemento web desaparezca con el error:

 TypeError: n is not a function at sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70 at t.unstable_runWithPriority (sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70) at Bi (sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70) at is (sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70) at cs (sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70) at uc (sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70) at t.unstable_runWithPriority (sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70) at Bi (sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70) at lc (sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70) at Xs (sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70)

el mismo código usado en una aplicación de solo React funciona bien. así que supongo que el problema es con SPFx.

¿Alguien puede mostrar un ejemplo de SPFx que permita cambiar la apariencia del componente en el elemento web desde dentro de un componente visible? Gracias