Hice para mí un Proyecto-Tutorial donde colecciono varios Ejemplos de Reacción de fácil a difícil. Hay una representación condicional de "cambio/caso" en App.js, donde yo, dependiendo del ListBox ItemIndex, cargo y ejecuto el Componente seleccionado.
Estoy tratando de optimizar mi código React eliminando la función "cambiar/caso" y reemplazándola con una matriz bidimensional, donde la primera columna contiene el Nombre del componente, la segunda columna el Objeto. Además, me gustaría cargar de forma diferida los componentes seleccionados.
Todo parece funcionar bien, también puedo capturar los eventos del mouse y también comienza la nueva representación, pero la pantalla se vuelve blanca... no hay representación de componentes.
Aplicación.js
import SampleList, { sampleArray } from './SampleList'; class App extends React.Component { constructor(props) { super(props); this.selectedIndex = -1; } renderSample(index) { if((index >= 0) && (index < sampleArray.length)) { return React.createElement(sampleArray[index][1]) } else { return <h3>Select a Sample</h3>; } } render() { return ( <header> <h1>React Tutorial</h1> <SampleList myClickEvent={ this.ClickEvent.bind(this) }/> <p /> <div> <Suspense> /**** HERE WAS MY ISSUE ****/ { this.renderSample(this.selectedIndex) } </Suspense> </div> </header> ); } ClickEvent(index) { this.selectedIndex = index; this.forceUpdate(); } }SampleList.js
import React from 'react'; const SimpleComponent = React.lazy(() => import('./lessons/SimpleComponent')); const IntervalTimerFunction = React.lazy(() => import('./lessons/IntervalTimerFunction')); const sampleArray = [ ["Simple Component", SimpleComponent], ["Interval Timer Function", IntervalTimerFunction] ]; class SampleList extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); this.selectOptions = sampleArray.map((Sample, Index) => <option>{ Sample[0] }</option> ); } render() { return ( <select ref={this.myRef} Size="8" onClick={this.selectEvent.bind(this)}> { this.selectOptions } </select> ); } selectEvent() { this.props.myClickEvent(this.myRef.current.selectedIndex); } } export default SampleList; export { sampleArray };Tienes varios problemas en ese código:
React.lazy para importar componentes dinámicamente, use Suspense para mostrar un respaldo;select puede escuchar el evento de change , y recibir el valor de la opción seleccionada, eso es conveniente para pasar el índice en su caso;setState con el índice seleccionado; import React, { Suspense, useState, useMemo } from 'react'; const SimpleComponent = React.lazy(() => import('./lessons/SimpleComponent')); const IntervalTimerFunction = React.lazy(() => import('./lessons/IntervalTimerFunction')); const sampleArray = [ ['Simple Component', SimpleComponent], ['Interval Timer Function', IntervalTimerFunction], ]; export default function App() { const [idx, setIdx] = useState(0); const SelectedSample = useMemo(() => sampleArray[idx][1], [idx]); const handleSelect = (idx) => setIdx(idx); return ( <Suspense fallback={() => <>Loading...</>}> <SampleList handleSelect={handleSelect} /> <SelectedSample /> </Suspense> ); } class SampleList extends React.Component { constructor(props) { super(props); } selectEvent(e) { this.props.handleSelect(e.target.value); } render() { return ( <select ref={this.myRef} Size="8" onChange={this.selectEvent.bind(this)}> {sampleArray.map((sample, idx) => ( <option value={idx}>{sample[0]}</option> ))} </select> ); } }Ejemplo de trabajo AQUÍ