Tengo un componente de Tablero, dentro del cual quiero mostrar varios Gráficos (estos gráficos pueden ser gráficos de líneas, gráficos de burbujas, lo que sea). Para este ejemplo, quiero mostrar un LineChart. Puede ver que LineChart se pasa como el valor de chartType.

 import React from 'react'; import Chart from './Chart'; import LineChart from '../LineChart'; const Dashboard = function () { return ( <div> <Chart chartType={LineChart} /> </div> ); };

El gráfico actúa como un envoltorio genérico, todo lo que hace es manejar la representación, no debería importar qué tipo de gráfico se le dé como parámetro. Si se le pasa un obj LineChart, debe representar el componente LineChart, si es un obj ScatterChart, entonces el componente ScatterChart.

 class Chart extends React.Component { constructor(props) { super(props); this.state = { data: [], }; this.ref = React.createRef(); this.myChartObj = new LineChart(props); // I DONT WANT THIS AS IT IS HARDCODING THE LINE CHART TYPE // this.myChartObj = new props.chartType(props); // DOESNT WORK } componentDidMount() { this.myChartObj.create(this.ref.current); } componentDidUpdate() { this.myChartObj.update(this.ref.current); } render() { return ( <div ref={this.ref} role="graphics-datachart" /> ); } }

Así que me pregunto cómo instanciar un nuevo objeto LineChart dentro del constructor de Chart usando el parámetro ChartType. Como puede ver en el código, actualmente está codificado con this.chartObj = new LineChart(props); Idealmente, la solución sería algo como esto: this.chartObj = new props.chartType(props); porque no hay codificación pero no funciona y arroja un error de nombre de constructor que no debe comenzar con una letra minúscula .

¿Alguien podría ayudar? Seguramente debería estar bien pasar una clase como parámetro y luego usar ese valor de parámetro para crear una instancia de un nuevo objeto de esa clase..? ¡Cualquier ayuda será enormemente apreciada, gracias!

Editar: soy consciente de que mi linter está generando el error, pero la pregunta sigue siendo cómo instanciar un obj desde un parámetro. Recibo un error similar en las pruebas unitarias, lo que significa que simplemente silenciar mi linter no encajará en nada: TypeError: props.chartType is not a constructor

Resultados de la prueba unitaria*

nota: estoy usando "chartType" en la pregunta de la pila, pero es equivalente a d3Chart en la captura de pantalla