React JS：如何将对象与数组信息作为Props映射传递给子组件

Got it, let's walk through how to make this work exactly as you want. Since you're referencing React components and props, here's a practical, easy-to-follow solution:

First, we need to link each category in your storeObjects to the corresponding color in your colors array. The key here is to use the order of the object's keys to match the order of colors.

Step-by-Step Code Implementation #

Here's how you'd do this in a React functional component:

// Import your ChildComponent first
import ChildComponent from './ChildComponent';

function ParentComponent() {
  // Your original data
  const storeObjects = { 
    furnitures: [{name: 'table', price: 50}, {name: 'chair', price: 20}], 
    electronics: [{name: 'tv', price: 150}] 
  };
  const colors = ['brown', 'yellow', 'green', 'red'];

  // Get the list of categories (keys) from storeObjects
  const productCategories = Object.keys(storeObjects);

  return (
    <div className="product-container">
      {productCategories.map((category, categoryIndex) => {
        // Grab the matching color for this category
        const assignedColor = colors[categoryIndex];
        
        // Optional: Skip if there's no matching color to avoid undefined props
        if (!assignedColor) return null;

        // Loop through each item in the current category
        return storeObjects[category].map((item) => (
          <ChildComponent
            // Important: Add a unique key for React list rendering
            key={`${category}-${item.name}`}
            name={item.name}
            price={item.price}
            color={assignedColor}
          />
        ));
      })}
    </div>
  );
}

export default ParentComponent;

Key Details to Note #

• Matching Categories to Colors: Object.keys(storeObjects) gives us the categories in the order they were defined in the object (ES6+ guarantees insertion order for string keys, so this is safe here). We use the categoryIndex from the first map call to pull the corresponding color from the colors array.
• Unique Keys: React requires every element in a list to have a unique key prop. We're using a combination of the category and item name to ensure uniqueness.
• Fallback for Missing Colors: The if (!assignedColor) return null check ensures we don't render components with an undefined color prop if your colors array is shorter than the number of categories in storeObjects. You can adjust this logic if you want to handle missing colors differently (e.g., use a default color).

If you're using a class component instead, the logic stays almost identical—you'd just move the data and mapping into the render() method.

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