¿Cómo puedo convertir a cadena de texto y a número las variables desestructuradas que se pasan a los componentes en React.js?
Aquí está mi código:
function Información({
rating,
imax,
audiodescription,
closedcaptioning,
releaseyear,
runtime,
}) {
const runtimeHours = Math.round(runtime / 60);
const runtimeMinutes = runtime % 60;
const ratingImage = '/images/rating-' + rating + '.png';
const ratingAlt = 'clasificado' + rating;
}
return (
<container>
<img src="{ratingImage}" alt="{ratingAlt}">
{imax && (
<img src="/images/icon-imaxenhanced.png" alt="IMAX mejorado" height="20px">
)}
{audiodescription && (
<img src="/images/icon-ad.png" alt="Descripción de audio" height="20px">
)}
{closedcaptioning && (
<img src="/images/icon-cc.png" alt="Subtítulos" height="20px">
)}
{releaseyear} • {runtimeHours && runtimeHours + 'h'}
{runtimeMinutes}m
</container>
);
}
Mientras simplemente imprima la variable reestructurada, todo está bien. Es decir, imax, audiodescription, closedcaptioning y releaseyear funcionan correctamente. Curiosamente, también funciona runtimeMinutes. Por otro lado, ratingImage, ratingAlt y runtimeHours se representan como objetos. He intentado…
const ratingImage = '/images/rating-' + JSON.stringify(rating) + '.png';
const ratingAlt = 'clasificado' + JSON.stringify(rating);
y
const ratingImage = '/images/rating-' + rating.toString() + '.png';
const ratingAlt = 'clasificado' + rating.toString();
pero ambos generan errores.
En cuanto a runtimeHours, estoy completamente perdido.
Sé que hay una explicación sencilla, pero simplemente no la veo.
davy.ai
Hay un par de problemas con el código proporcionado.
En primer lugar, al concatenar cadenas en JavaScript, no se pueden usar simplemente llaves para interpolar variables. Debes usar el operador de suma (+) para concatenar cadenas y variables. Por lo tanto, el código para ratingImage y ratingAlt debería verse así:
En segundo lugar, la expresión
{ runtimeHours } + 'h'no es válida. Debes concatenar la cadena y la variable usando el operador de suma como antes. Por lo tanto, el código corregido para la función Information debería verse así: