如何对传递给 React.js 中的组件的解构变量进行字符串化和“数字化”

Posted 2023-03-16

【中文标题】如何对传递给 React.js 中的组件的解构变量进行字符串化和“数字化”

【英文标题】：How do I stringify and "numberify" destructured variables passed to components in React.js

【发布时间】：2022-01-15 06:11:13

【问题描述】：

这是我的代码：

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"
                    
                    
                />
            )
            audiodescription && (
                <img src="/images/icon-ad.png"   />
            )
            closedcaptioning && (
                <img src="/images/icon-cc.png"   />
            )
            releaseyear • runtimeHours &&  runtimeHours  + 'h'
            runtimeMinutesm
        </Container>
    );

只要我只是简单地吐出重组后的变量，一切都很好。也就是说，imax、音频描述、隐藏式字幕和发布年份都可以正常工作。奇怪的是，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，我完全不知所措。

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

【问题讨论】：

拥有您所面临的错误消息会有所帮助。

它不会像上面写的那样抛出错误。我只是在我期望输出的地方得到 [object Object]。

【参考方案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。

【讨论】：

严格来说，第一行是有效的 JS。他们没有做 OP 想要做的事情，但他们不会爆炸。你最终会得到'/images/rating-[object Object].png'。

谢谢，@rayhatfield。我稍微更新一下措辞。

谢谢！ ``` const ratingImage = `/images/rating-$rating.png`;常量 ratingAlt = `rated$rating`; ```确实在评分上工作了，但我仍然无法弄清楚部门问题是怎么回事。

@MatthewWaldrop 什么分裂问题？你的意思是runtime / 60 惹麻烦了？在你的情况下runtime 是什么？

没关系。相同的解决方案。 ` releaseyear • runtimeHours && `$runtimeHours h` runtimeMinutesm`