Сценарии - Динамический рендер компонентов

Page / - Изменено Alexandr Fokin в 2023/12/29 14:48

Динамический рендер компонентов

Изменено Alexandr Fokin

в 2023/12/29 14:48

Оглавление

React + TypeScript
import { useState, createElement, ElementType } from 'react' interface componentProp { selectedComponent: string, prop1: number, onClick: (state: componentProp) => void }; function Component1(prop: componentProp) { return ( <div> <p>component1 {prop.prop1}</p> <button onClick={() => { prop.onClick({ ...prop, prop1: prop.prop1 + 1 }) }} > Increment </button> <button onClick={() => { prop.onClick({ ...prop, selectedComponent: "c2" }) }} > To component2 </button> <button onClick={() => { prop.onClick({ ...prop, selectedComponent: "unknow name" }) }} > Bad component </button> </div> ) } function Component2(prop: componentProp) { return ( <div> <p>component2 {prop.prop1}</p> <button onClick={() => { prop.onClick({ ...prop, prop1: prop.prop1 + 1 }) }} > Increment </button> <button onClick={() => { prop.onClick({ ...prop, selectedComponent: "c1" }) }} > To component1 </button> </div> ) } const mapping = new Map<string, ElementType>() .set("c1", Component1) .set("c2", Component2); function App() { const [state, setState] = useState<componentProp>( { selectedComponent: "c1", prop1: 10, onClick: (q) => { setState(q) } }); const selectedComponent = mapping.get(state.selectedComponent); if (selectedComponent === undefined) { return (<> <div>Not defined "{state.selectedComponent}"</div> </>); } return ( <> <div> {createElement(selectedComponent, state) } </div> </> ) } export default App