Question

在Review.js中，我试图创建一个for循环，以便<starIcon/>根据其拥有的等级多次显示。因此，如果它的评级为4星，那么我会在该评论区域中渲染4星图标。我正在尝试在JSX内部使用for循环（我尝试使用此源：Loop-inside-react-jsx，但不确定如何使用数据库数据来更改for循环的限制。就像for循环条件一样基本上应该是，但是我不确定如何在该项目中实现。

（对于i = 0； i <（{rating} -1）； i ++）{

App.js

   export default class App extends Component {
    constructor() {
        super();
    this.state = {
        language: "english"
    };
}

render() {
    return <Fragment>
        <Overview />
        <Reviews />
    </Fragment>;
}
}

Reviews.js

function Reviews({ reviews, getReviewsQuery }) {
const length = reviews.length;
return <div className="reviews">
    <div className="reviews__header">
        <h2>Reviews</h2>
        <div className="reviews__header__stars">
            <StarIcon />
            {`(${length} reviews)`}
        </div>
    </div>
    {length ? <hr /> : ""}
    <table>
        <tbody>
            {reviews.map(r => (
                <Review key={r.id} review={r} getReviewsQuery={getReviewsQuery} />
            ))}
        </tbody>
    </table>
    <hr />
    <CreateReview getReviewsQuery={getReviewsQuery} />
</div>;
}
const getReviews = gql`
query getReviews {
    reviews {
        id
        rating
        author
        comment
        created_at
    }
}
`;

export default function ReviewsHOC(props) {
    return <Query query={getReviews}>
    {({ data }) => (
                <Reviews
            {...props}
            getReviewsQuery={getReviews}
            reviews={data && data.reviews || []} // eslint-disable-line no- 
   mixed-operators
            />
        )}
    </Query>;
    }

Review.js

export default function Review({
onDeleteReview,
review: {
    id,
    rating,
    author,
    comment,
    created_at
} = {}
}) {
return <tr className="review">
    <td className="review__info">
        <div className="review__info__author">
            {author}
        </div>
        <div className="review__info__date">
            {created_at}
        </div>
    </td>
    <td className="review__details">
        <div className="review__details__rating">
            {rating} <StarIcon />
        </div>
        <div className="review__details__comment">
            {comment}
        </div>
    </td>
    <td className="review__delete">
        <TrashIcon />
    </td>
</tr>;
}

Star.js

export default function StarIcon(props) {
    return <svg className="star-icon" viewBox="0 0 20 20" {...props}>
        <path d="M10 0L6.91 6.585 0 7.64l5 5.125L3.82 20 10 16.583 16.18 20 15 12.765l5-5.125-6.91-1.056z" fillRule="evenodd" opacity=".5" />
    </svg>;
}

Answer 1

JavaScript缺乏其他一些语言所具有的“范围”方法，该方法无法阻止JSX喜欢的声明性编程。我会说两个最常见的选项是：

a。使用渲染返回中的[...Array(count)]技巧。

    <div className="review__details__rating">
        {[...Array(rating)].map(() => <StarIcon />)}
    </div>

b。在渲染器的返回外部中循环，将每个星星推入数组（就像您的链接文章显示一样）

// before you `return`
let stars = [];
for (let i = 0; i < rating; i++) {
  stars.push(<StarIcon />);
}

// ...somewhere inside render's return
    <div className="review__details__rating">
        <div>{stars}</div>
    </div>

如何在React

1 个答案: