React组件中如何访问State数组属性并调整渲染逻辑？

Hey there! Let's work through how to handle your React state array and get that discount price display working just right. Here's a step-by-step breakdown:

First, let's address a couple of key issues in your current code, then build out the price rendering behavior you want.

1. Fix the onLoad Function Passing #

Right now, onLoad = {this.hasDiscountTag()} is immediately executing your function when the component renders, instead of passing the function reference to run later. Since your goal is to handle price display (not an image load event), we can actually remove this onLoad prop entirely—we'll handle the logic directly in the rendering flow.

2. Access State Array Elements & Build Price Rendering #

Your this.state.thumbnails array is already being mapped correctly to render Thumbnail components. The magic happens in how we pass and use the price and hasDiscount values to render the right price styling.

Option 1: Handle Logic in the Child Thumbnail Component #

This is the cleaner approach—keep the parent component focused on data, and let the child handle presentation.

First, update the parent's map loop to pass clear, semantic props:

{this.state.thumbnails.map(thumbnail => (
  <Thumbnail 
    key={thumbnail.id} 
    name={thumbnail.title} 
    id={thumbnail.id} 
    originalPrice={thumbnail.price} 
    discountPrice={thumbnail.hasDiscount} 
    imageUrl={thumbnail.imageUrl} 
    href={thumbnail.href} 
    category1={thumbnail.category1} 
    category2={thumbnail.category2} 
  />
))}

Then, modify your Thumbnail component to render prices based on the discount value:

import React from 'react';

const Thumbnail = ({ originalPrice, discountPrice, name, imageUrl, href }) => {
  return (
    <div className="thumbnail-card">
      <img src={imageUrl} alt={name} />
      <a href={href}>{name}</a>
      {/* Price Display Section */}
      <div className="price-container">
        {discountPrice > 0 ? (
          <>
            {/* Discounted price (bold, highlighted) */}
            <span className="discount-price">${discountPrice}</span>
            {/* Original price with strikethrough */}
            <span className="original-price">${originalPrice}</span>
          </>
        ) : (
          {/* No discount? Just show regular price */}
          <span className="regular-price">${originalPrice}</span>
        )}
      </div>
    </div>
  );
};

export default Thumbnail;

Add CSS to style the prices as requested:

.discount-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: #d32f2f;
  margin-right: 8px;
}

.original-price {
  font-size: 1rem;
  color: #666;
  text-decoration: line-through;
}

.regular-price {
  font-size: 1.1rem;
  color: #222;
}

Option 2: Handle Logic in the Parent Component (If You Prefer) #

If you want to keep the child component simpler, you can build the price JSX in the parent and pass it down:

{this.state.thumbnails.map(thumbnail => {
  // Build the price element right in the map loop
  const priceContent = thumbnail.hasDiscount > 0 ? (
    <>
      <span className="discount-price">${thumbnail.hasDiscount}</span>
      <span className="original-price">${thumbnail.price}</span>
    </>
  ) : (
    <span className="regular-price">${thumbnail.price}</span>
  );

  return (
    <Thumbnail 
      key={thumbnail.id} 
      name={thumbnail.title} 
      id={thumbnail.id} 
      priceContent={priceContent} 
      imageUrl={thumbnail.imageUrl} 
      href={thumbnail.href} 
      category1={thumbnail.category1} 
      category2={thumbnail.category2} 
    />
  );
})}

Then in Thumbnail, just render the passed priceContent:

<div className="price-container">
  {priceContent}
</div>

Key Notes to Remember #

• Always use a unique key in your map loop (you're already doing this with thumbnail.id—great job!)
• Naming props clearly (like originalPrice instead of just price) makes your code easier to read and maintain
• Keep presentation logic (like styling) separated from your JSX using CSS for cleaner code

内容的提问来源于stack exchange，提问作者cristian Oliveira