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;