时间戳

首页 > 解决方案 > 如何在 React 中以 3 行列出项目

node.js - 如何在 React 中以 3 行列出项目

问题描述

我有一个我想以 3 行显示的项目列表，但它没有以 3 行显示。它适用于普通的 HTML，但不适用于 React。

这是我的事件组件

 const Event = (props) => (
   <div className="wrap">
     <div className="tile">
      <img src={props.event.eventImage} />
      <div className="text">
      <h1>{props.event.title}</h1>
      <h2 className="animate-text">More lorem ipsum bacon ipsum.</h2>
      <p className="animate-text">{props.event.description}</p>
      <div className="dots">
        <span />
        <span />
        <span />
      </div>
    </div>
  </div>
 </div>
);

export default class EventsList extends Component {
  constructor(props) {
   super(props);
   this.state = { events: [] };
 }

  componentDidMount() {
    axios
     .get("http://localhost:9000/events/")
      .then((response) => {
        this.setState({ events: response.data });
      })
      .catch(function (error) {
      console.log(error);
     });
  }

 eventList() {
   return this.state.events.map(function (currentEvent, i) {
    return <Event event={currentEvent} key={i} />;
  });
 }

 render() {
   return (
    <div>
      <div className="row">{this.eventList()}</div>
    </div>
   );
 }
}

和我的 CSS

.wrap {
  margin: 50px auto 0 auto;
  width: 100%;
  display: flex;
  align-items: space-around;
  max-width: 1200px;
}
.tile {
  width: 380px;
  height: 380px;
  margin: 10px;
  background-color: #99aeff;
  display: inline-block;
  background-size: cover;
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease-out;
  box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.44);
  overflow: hidden;
  color: white;
  font-family: "Roboto";
 }
.tile img {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  transition: all 0.4s ease-out;
 }
 .tile .text {
   /*   z-index:99; */
  position: absolute;
  padding: 30px;
  height: calc(100% - 60px);
 }
 .tile h1 {
   font-weight: 300;
   margin: 0;
   text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
 }
 .tile h2 {
  font-weight: 100;
  margin: 20px 0 0 0;
  font-style: italic;
   transform: translateX(200px);
  }
 .tile p {
   font-weight: 300;
   margin: 20px 0 0 0;
   line-height: 25px;
   /*   opacity:0; */
   transform: translateX(-200px);
   transition-delay: 0.2s;
  }
 .animate-text {
   opacity: 0;
   transition: all 0.6s ease-in-out;
 }
 .tile:hover {
  /*   background-color:#99aeff; */
   box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.64);
   transform: scale(1.05);
  }
 .tile:hover img {
   opacity: 0.2;
 }
 .tile:hover .animate-text {
  transform: translateX(0);
  opacity: 1;
 }
.dots {
  position: absolute;
  bottom: 20px;
  right: 30px;
  margin: 0 auto;
  width: 30px;
  height: 30px;
  color: currentColor;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.dots span {
  width: 5px;
  height: 5px;
  background-color: currentColor;
  border-radius: 50%;
  display: block;
  opacity: 0;
  transition: transform 0.4s ease-out, opacity 0.5s ease;
  transform: translateY(30px);
 }

 .tile:hover span {
   opacity: 1;
   transform: translateY(0px);
  }

 .dots span:nth-child(1) {
   transition-delay: 0.05s;
  }
 .dots span:nth-child(2) {
   transition-delay: 0.1s;
  }
 .dots span:nth-child(3) {
  transition-delay: 0.15s;
  }

@media (max-width: 1000px) {
 .wrap {
  flex-direction: column;
  width: 400px;
 }

}

这就是它的显示方式。

但这就是我得到的

但这就是我想要实现的。

这就是我希望项目显示的方式

我是 React 的新手，我正在通过构建一个项目来学习。

这是我想要实现的代码笔链接。

Codepen 链接

标签： node.jsreactjs

解决方案

我有一种感觉，它是你的css，你的wrap班级伸展了整个row宽度，在里面，有一个tilethat's only 380px。

考虑用三列制作row一个。grid

推荐阅读