在 REACT 中构建网格视图答案

【问题标题】：Construct a grid view in REACT在 REACT 中构建网格视图
【发布时间】：2020-08-17 05:02:07
【问题描述】：

我想做一个反应站点的网格视图。

以上是我想做的。但是，我只是构建了这个。

网格视图的要求：

仅按以下顺序显示：图像、内容、时间
每个网格项的背景颜色为#cccccc
图像和文本应居中对齐
每个项目的宽/高：200px，边距10px
如果网格项不适合特定行，则应转到下一行

如何更改 css 和 react 组件？

jsx：

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activities: activities,
            filteredActivities: activities,
            isShow: false,
            isGrid: false,
        };
    }

    render() {
        return(
            <div className="notificationsFrame">
                <div className="panel">
                    <Header name={this.props.name} onClickSearch={this.handleClickChange} onClickAdd={this.addItem} onClickChange={this.changeView}/>
                    { isShow ? <SearchBar inputChanged={this.handleSearchChange} /> : null }
                    { isGrid ? <ContentGrid activities={this.state.filteredActivities} /> : <ContentList activities={this.state.filteredActivities} onRightClick={this.deleteItem}/> }
                </div>
            </div>
        );
    }
}

class ContentGrid extends React.Component {
    render() {
        return (
            <div className="content">
                <div className="grid"></div>
                {this.props.activities.map(activity =>
                    <ActivityItemGrid img_url={activity.img_url} time={activity.time}
                        content={activity.content} comment_count={activity.comment_count}
                    />
                )}
            </div>
        );
    }
}

class ActivityItemGrid extends React.Component{
    render() {
        return (
            <div className="items">
                <div className="avatar">
                    <img src={this.props.img_url} />
                </div>
                <p>
                    {this.props.content}
                </p>
                <span className="time">
                    {this.props.time}
                </span>
            </div>
        );
    }
}

css：

.demo {
  position: relative;
}

.demo .notificationsFrame {
  z-index: 2;
  width: 100%;
  top: 20px;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  font-family: "Open Sans", Helvetica, sans-serif;
  margin-bottom: 40px;
}

.demo .notificationsFrame .content {
  position: relative;
  overflow: hidden;
}

.demo .notificationsFrame .content .items {
  position: relative;
  z-index: 2;
  width: 200px;
  height: 200px;
  margin: 10px 10px 10px 10px;
  display: block;
  background-color: #cccccc;
  text-align: center;
}

.demo .notificationsFrame .content .items .time {
  display: block;
  font-size: 11px;
  line-height: 11px;
  margin-bottom: 2px;
}

.demo .notificationsFrame .content .items p {
  font-size: 15px;
  font-weight: bold;
}

.demo .notificationsFrame .content .items p b {
  font-weight: 600;
}

【问题讨论】：

使用 CSS 网格。 gridbyexample.com/examples

标签： javascript css reactjs jsx

【解决方案1】：

您可以根据需要使用 CSS 网格。将它与 repeat 和 minmax 函数结合使用，以拥有一个响应式网格，从而自动将所有内容相应地适应容器宽度。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 12px;
}

.item {
  min-height: 200px;
  background-color: #eee;
}

<div class="grid">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
</div>

【讨论】：