我如何字符串化和 "numberify" 解构变量传递给 React.js 中的组件

Question

这是我的代码：

function Information({
    rating,
    imax,
    audiodescription,
    closedcaptioning,
    releaseyear,
    runtime,
}) {
    const runtimeHours = Math.round(runtime / 60);
    const runtimeMinutes = runtime % 60;
    const ratingImage = '/images/rating-' + { rating } + '.png';
    const ratingAlt = 'rated' + { rating };

    return (
        <Container>
            <img src={ratingImage} alt={ratingAlt} />
            {imax && (
                <img
                    src="/images/icon-imaxenhanced.png"
                    alt="IMAX enhanced"
                    height="20px"
                />
            )}
            {audiodescription && (
                <img src="/images/icon-ad.png" alt="Audio Description" height="20px" />
            )}
            {closedcaptioning && (
                <img src="/images/icon-cc.png" alt="Closed Captioning" height="20px" />
            )}
            {releaseyear} • {runtimeHours && { runtimeHours } + 'h'}
            {runtimeMinutes}m
        </Container>
    );
}

只要我只是吐出重组后的变量，一切都很好。也就是说，imax、audiodescription、closedcaptioning 和 releaseyear 都可以正常工作。奇怪的是，runtimeMinutes 也是如此。另一方面，ratingImage、ratingAlt 和 runtimeHours 都呈现为对象。我试过了...

    const ratingImage = '/images/rating-' + { JSON.stringify(rating) } + '.png';
    const ratingAlt = 'rated' + { JSON.stringify(rating) };

和

    const ratingImage = '/images/rating-' + { rating.toString() } + '.png';
    const ratingAlt = 'rated' + { rating.toString() };

但都抛出错误。

至于 runtimeHours，我完全不知所措。

我知道有一个简单的解释，但我就是看不到。

Answer 1

这些行没有按照您的预期进行：

    const ratingImage = '/images/rating-' + { rating } + '.png';
    const ratingAlt = 'rated' + { rating };

如果您连接字符串 ('rated') 和类似于对象的内容 ({ rating })，对象将被强制转换为字符串：[object Object]。

如果rating是一个字符串，你可以试试这个(Template literals):

const ratingImage = `/images/rating-${rating}.png`;
const ratingAlt = `rated${rating}`;

请注意，它是纯 JS 代码，而不是 JSX。