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")'.
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;