为什么我的 class 样式没有被识别？？反应

Question

我正在映射一个状态为 items2

的对象

items2: [
  {
    id: 1,
    title: 'TRENDING ON THE COURT',
    image1: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/8ef2ada7-0cf4-43d4-a0a1-4a60e3071b06/jordan.jpg',
    image2: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/1b387797-073a-4f60-8b67-9485c23ca556/jordan.jpg',
    image1title: 'AIR JORDAN XXXIV SE',
    image2header: 'L.A BORN',
    image2title: 'JORDAN "WHY NOT?" ZERO.3',
    a1text: 'Shop',
    a2text: 'Shop'

  },
  {
    id: 2,
    title: 'TRENDING ON THE STREETS',
    image1: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/ac454c04-2d8b-4cf5-b73a-7245545b6f7c/jordan.jpg',
    image2: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/de7332be-8c0d-405f-af9e-201ba9f61ab3/jordan.jpg',
    image1title: 'JORDAN AIR MAX 200',
    image2title: "JORDAN WOMEN'S FLIGHT CAPSULE",
    a1text: 'Shop',
    a2text: 'Shop'
  },
  {
    id: 3,
    title: 'MEMBER ACCESS',
    image1: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/2225370e-a461-4ea3-ac94-3ece70dc3575/jordan.jpg',
    image2: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/037f5213-a631-4e91-9c70-9187aefda947/jordan.jpg',
    image1header: "'JORDAN UNITE COLLECTION'",
    image1title: 'AIR JORDAN III',
    image2title: "GET JORDAN'S LATEST",
    a1text: 'Shop Now',
    a2text: 'Download SNKRS'
  },
  {
    id: 4,
    title: 'EXPLORE MORE FROM JORDAN',
    image1: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/063f62a9-28b5-4f40-9e06-a894f5c469dd/jordan.jpg',
    image2: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/6d0400bf-5378-4ec5-85f1-40145fce3d30/jordan.jpg',
    image1title: 'STORIES UNITING THE COMMUNITY',
    image2title: 'THE ULTIMATE HISTORY OF AIR JORDAN',
    a1text: 'Explore',
    a2text: 'Explore'

  }
]

并渲染那些项目：

renderItems2 = () => {
  return (
    <div className='items2-container'>
      {this.state.items2.map(item => {
        return (
          <div className='item2-card' key={item.id}>
            <h2>{item.title}</h2>
            <img src={item.image1} />
            <div>
              <h6>{item.image1header}</h6>
              <h2>{item.image1title}</h2>
              <a className={item.a1text !== 'Shop' ? '.shop-now' : '.shop'}>{item.a1text}</a>

            </div>
            <img src={item.image2} />
            <div>
              <h6>{item.image2header}</h6>
              <h2>{item.image2title}</h2>
              <a className={item.a2text !== 'Shop' ? '.shop-now' : '.shop'}>{item.a2text}</a>
            </div>

          </div>
        )
      })}
    </div>
  )
}

好的是一切都正确呈现，我的控制台没有错误。我试图使用三进制来根据状态更改我的元素的 class 名称并且逻辑有效，因为 class 在 chrome 开发工具中确实发生了变化！但是，当我检查它时，我从我的 css 文件中导入的样式具体不是 applied/does 不起作用，并且只显示 element.style {} 该特定元素。我检查了我的样式表导入是否有问题，但其他元素的样式是否正确。我也尝试过对 css 使用 !important 并检查是否有任何其他 css 样式的文件 .shop 和 .shop-now 不小心在其中没有。

.shop {
    padding-top: 11px;
    padding-bottom: 9px;
    padding-left: 24px;
    width: 40%;
    padding-right: 24px;
    border-radius: 20px;
    background-color: #fff;
    color: #111;
}

.shop-now {
    padding: 20px;
    border-radius: 20px;
    background: #fff;
    color: #111;
}

Answer 1

您应该删除 class 名称引用中的 .，例如'shop-now' 而不是 '.shop-now':

<a className={item.a2text !== 'Shop' ? 'shop-now' : 'shop'}>{item.a2text}</a>

CSS class 名称应该在您的样式表中使用 . 定义，但在没有 .[=14= 的 HTML 元素上引用]

为什么我的 class 样式没有被识别？？反应

Why is my class styling not being recognized?? React

javascript

css

styling

conditional-operator

reactjs