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

Question

我正在创建一个网站，并且我在 jsx 中使用该样式，但是，在输出列表时样式不起作用。我已经通过分别输出每个有效的方法来完成它，但是，我想通过输出列表/数组使其更具可重复性。没有关于 stying 的错误消息，但我有一条错误消息，它无法识别列表中每个项目的键。我为这个产品页面创建了两个部分，第一个部分是所有产品都将在我称之为第二个部分的地方，其中包含模板，然后它将通过读取列表/数组来呈现所有产品。这是主要的“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;这是模板代码“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

有一个小错字，替换product.colour为item.color;