ReactJs：使用道具和列表进行样式设计

Question

I am creating a website, and i am using the style in jsx, but, the styling is not working while outputting lists.

I have done it by outputting each one separately which works, but, I want to make it more reproducible by outputting a list/array.

There are no error messages about the stying, but I have an error message that it is not recognising a key for each item in the list.

I have created two parts for this products page the first one is were all the products will be where I'll call my second one, which contains the template, then it will render all of them out by reading an the list/array.

This is the Main one 'Products.js'

 import React, { Component } from 'react'; import './Products.css'; import Product from './Product' class Products extends Component { state={ product: [ { name: "T-SHRIT1", colour: "#404040", price: "£50", imgSrc: "./imgs/products/test.png", imgalt: "t-shirt", accentcolour: "#D9D9D9", id: 1 }, { name: "T-SHRIT2", colour: "#404040", price: "£50", imgSrc: "./imgs/products/test.png", imgalt: "t-shirt", accentcolour: "#D9D9D9", id: 3 }, { name: "T-SHRIT3", colour: "#C4C4C4", price: "£50", imgSrc: "./imgs/products/test2.png", imgalt: "t-shirt", accentcolour: "#626262", id: 2 }, { name: "T-SHRIT4", colour: "#C4C4C4", price: "£50", imgSrc: "./imgs/products/test2.png", imgalt: "t-shirt", accentcolour: "#626262", id: 4 }, ] } render() { return ( <div className="Products"> <div className="Products_container"> <Product product={this.state.product} /> </div> </div> ); } } export default Products; 

This is the template code 'Product.js'

 import React from 'react'; import './Products.css'; import anime from 'animejs'; const Product = ({product}) => { const Productslist = product.map(item => { return( <div className="Product" style={{background: item.colour,}} key={item.id}> <div className="ProductName" style={{color: item.accentcolour}}>{item.name}</div> <img src={item.imgSrc} alt={item.imgAlt} className="ProductImg"/> <div className="ProductPrice" style={{color: item.accentcolour}}>{item.price}</div> </div> ) }) return ( <div className="Product"> { Productslist } </div> ); } export default Product; 

Answer 1

那里有一个小错字，用item.color替换product.colour ；