Question

我正在创建一个网站，并且正在jsx中使用该样式，但是在输出列表时该样式无效。

我通过分别输出每个有效的方法来做到这一点，但是，我想通过输出一个列表/数组来使其更具可重复性。

没有关于样式的错误消息，但是我有一条错误消息，它无法识别列表中每个项目的键。

我为此产品页面创建了两个部分，第一个是所有产品都将被称为第二个产品的位置，其中包含模板，然后通过读取列表/将所有产品呈现出来/数组。

这是主要的“ 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;

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

1 个答案: