Escribí una función que devuelve algo de JSX, dentro de un componente de clase, de la siguiente manera:
billingPendingMarker = () => { const { classes } = this.props; return ( <svg className={classes.marker} height="50px" width="8px"> <rect x="0" width="8" height="50" rx="4" fill={color.reds[300]} /> </svg> ) }En el método de representación principal de mi componente de clase, "llamé" a esta función como si estuviera escribiendo JSX:
<this.billingPendingMarker />Si bien esto funcionó sin problemas localmente, al implementar una compilación en un entorno de prueba, recibí el siguiente error: https://reactjs.org/docs/error-decoder.html/?args%5B%5D=undefined&args%5B% 5D=&invariante=130
Cuando cambié <this.billingPendingMarker /> a this.billingPendingMarker() mi código funcionó bien. Lo que no puedo entender es, ¿por qué escribir el "formulario JSX" hace que la página se bloquee? ¿No estamos, en efecto, creando un componente funcional encapsulado dentro de nuestro componente de clase principal?
Mi sospecha inicial fue que algo iba mal mientras se minimizaba el código durante el proceso de compilación, pero no estoy seguro.
Entiendo que esta no es la mejor práctica de "diseño", pero mi duda es más sobre la corrección de la sintaxis.
¡Agradezco cualquier ayuda que pueda obtener para entender esto!
En primer lugar, debe saber que el componente debe tener una letra mayúscula primero para que React lo trate como tal. Consulte esta publicación para obtener información:
¿Los nombres de los componentes de ReactJS deben comenzar con letras mayúsculas?
Probablemente sea por eso que su componente dentro de su componente de clase no se está procesando. Además, no debería tener que usar esto, sino solo <BillingPendingMarker />
Como nota general, rara vez se recomienda crear un componente dentro del componente. Va en contra de la reutilización y la componibilidad. Un componente funcional dentro de un componente de clase es aceptable, pero no haga un componente funcional dentro de componentes funcionales.
Por otro lado, tener una función que devuelva algo de JSX está totalmente bien. No es ningún problema llamar a {this.billingPendingMarker()} para generar el JSX deseado. Pero en este caso, su billingPendingMarker no se considera un componente React, solo una función que devuelve JSX pero sin el "paquete y las funcionalidades" del componente que viene con él.