0
196
Vistas¿Cómo renderizo los componentes de reacción dinámicamente desde el módulo importado?
Estoy tratando de representar los componentes de React dinámicamente en función de las rutas que se proporcionan en la URL.
lienzo/index.tsx
export { default as CardGroup } from "./cards.example";src/Aplicación.tsx
import React from "react"; import { useParams } from "react-router-dom"; import * as Canvas from "./canvas"; const App: React.FC = () => { const params = useParams(); const widgetName = (params.widgetName ?? ''; return ( <div className = "App" > {< Canvas[widgetName] / >} // error here </div> ); }; export default App;No puedo renderizar el widget. Me da el siguiente error.
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("/Users/mypc/Code/atoms/src/canvas/index")'.No se encontró ninguna firma de índice con un parámetro de tipo 'cadena' en el tipo 'typeof import("/Users/mypc/Code/atoms/src/canvas/index")'.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Canvas[widgetName] no es un componente React válido. Calcule el valor del componente primero como una variable local y luego reprodúzcalo como JSX .
Sugiero crear un objeto CanvasMap local para que pueda escribirlo correctamente para lo que se importa. Está creando un objeto de búsqueda que utiliza claves de tipo cadena y devuelve el componente React.FC .
Ejemplo:
import React from "react"; import * as Canvas from "./canvas"; import { useParams } from "react-router-dom"; const CanvasMap: { [K: string]: React.FC<{}> } = { ...Canvas }; const App: React.FC = () => { const { widgetName } = useParams(); const CanvasComponent = CanvasMap[widgetName ?? "NotFound"]; return ( <div className="App"> <CanvasComponent /> </div> ); }; export default App;
·
Juan Pablo Isaza
Denunciar
Responde la pregunta