React 道具不适用于 for 循环

Posted

技术标签:

【中文标题】React 道具不适用于 for 循环【英文标题】:React props are not working into for loop 【发布时间】:2021-10-02 21:43:12 【问题描述】:

当我将评级作为道具传递给 Star Rating 组件时,我可以在 StarRating 函数中找到评级值,但无论何时进入 for 循环评级都变得不可见。

import React from 'react'

const StarRating = ( rating ) => 
const stars = [];
for (let j; j <= 5; j++) 
    if (j <= 3) 
        stars.push(<i className="fas fa-start"></i>);
     else if (j === Math.ceil(rating) && !Number.isInteger(rating)) 
        stars.push(<i className="fas fa-star-half-alt"></i>);
     else 
        stars.push(<i className="fas fa-star"></i>);
    

return (
    <div>
        stars
    </div>
)


export default StarRating

【问题讨论】:

【参考方案1】:

"j" 必须在你的 For 循环中初始化。

for(let j = 1;j <=5; j++)
 
  /*your logic here*/ 

【讨论】:

【参考方案2】:

尝试使用像 ...rating 这样的扩展运算符更新破坏对象,并且循环中的变量初始化是强制性的。

import React from 'react'

const StarRating = (...rating ) => 
const stars = [];
for (let j=0; j <= 5; j++) 
    if (j <= 3) 
        stars.push(<i className="fas fa-start"></i>);
     else if (j === Math.ceil(rating) && !Number.isInteger(rating)) 
        stars.push(<i className="fas fa-star-half-alt"></i>);
     else 
        stars.push(<i className="fas fa-star"></i>);
    

return (
    <div>
        stars
    </div>
)


export default StarRating

【讨论】:

以上是关于React 道具不适用于 for 循环的主要内容,如果未能解决你的问题,请参考以下文章