反应，在 array.map() 之后丢失样式答案

【问题标题】：React, Losing styles after array.map()反应，在 array.map() 之后丢失样式
【发布时间】：2020-07-16 05:20:12
【问题描述】：

我有一个对象数组。

在我的 React 组件中，我有一段 html 代码：

    <div class="item">
      <div class="card card--big">
        <div class="card__cover">
          <img src="img/covers/cover2.jpg" alt="" />
          <a href="#" class="card__play">
            <i class="icon ion-ios-play"></i>
          </a>
        </div>
        <div class="card__content">
          <h3 class="card__title"><a href="#">Benched</a></h3>
          <span class="card__category">
            <a href="#">Comedy</a>
          </span>
          <span class="card__rate"><i class="icon ion-ios-star"></i>7.1</span>
        </div>
      </div>
    </div>

如果我手动粘贴他 - 一切都很好，但如果我使用 Array.map，样式会丢失（卡片大小错误）。

  const elements = content.map((content, index) => {
    return (
      <div class="item">
        <div class="card card--big">
          <div class="card__cover">
            <img src="img/covers/cover2.jpg" alt="" />
            <a href="#" class="card__play">
              <i class="icon ion-ios-play"></i>
            </a>
          </div>
          <div class="card__content">
            <h3 class="card__title"><a href="#">Benched</a></h3>
            <span class="card__category">
              <a href="#">Comedy</a>
            </span>
            <span class="card__rate"><i class="icon ion-ios-star"></i>7.1</span>
          </div>
        </div>
      </div>
    );
  });

我该如何解决这个问题？

【问题讨论】：

在反应中我们不使用class，而是使用className。你知道吗？
是的，我修复了 class / classNames 错误，但这并不能解决我的问题。
你能在codesandbox上做demo吗？
对不起，项目很大，我无法创建codesandbox-demo
没问题。我的意思只是带有卡片映射数组的部分（包括样式）。但没关系，不要打扰

标签： javascript html css node.js reactjs

【解决方案1】：

我为item div 获取了您的卡片 html 标记，并在 jsFiddle 中运行它以查看卡片大小是否发生变化。它工作正常。检查代码here。

function CardList() {
  var content = [
  	{ id: 1, name: 'card 1' },
    { id: 2, name: 'card 2' },
    { id: 3, name: 'card 3' },
  ];
  
  return (
    <div className="wrapper">
      {content.map((item, index) => (
        <div className="item">
          <div className="card card--big">
            <div className="card__cover">
              <img src="img/covers/cover2.jpg" alt="" />
              <a href="#" className="card__play">
                <i className="icon ion-ios-play" />
                {item.name}
              </a>
            </div>
            <div className="card__content">
              <h3 className="card__title"><a href="#">Benched</a></h3>
              <span className="card__category">
                <a href="#">Comedy</a>
              </span>
              <span className="card__rate"><i className="icon ion-ios-star" />7.1</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

ReactDOM.render(<CardList />, document.querySelector("#app"));

.wrapper {
  display: flex;  
}

.item {
  margin: 1rem;
}

.card {
  padding: .5rem;
  background-color: #21D4FD;
}

.card.card--big {
  padding: 2rem;
}

&lt;div id="app"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

问题来自 .item 类之前的父元素。无论父元素是什么，您都需要正确设置样式。例如，如果父 div className 是 .wrapper，您可以将其样式设置为 100vh，然后将项目高度设置为百分比，例如 80%。这将强制项目高度统一。如果宽度有问题，您还可以在父元素上使用 display: flex。

【讨论】：