在 React Js 中的 TypeScript 中创建一个包含 2 列、2 行和 3 个单元格的网格

Question

我想构建一个 HTML 网格，它有 2 列 + 2 行 + 3 个单元格，如下所示；-

目前我使用带有行跨度的表格来创建如下布局：-

import * as React from 'react';
import styles from './SingleNews.module.scss';
import { ISingleNewsProps } from './ISingleNewsProps';
import NewsTableCell from './NewsTableCell';

export interface INews {
    recentNews: ISingleNewsProps[];
    featuredNews?: ISingleNewsProps[];
    featured: boolean;
}

export default class SingleNews extends React.Component<INews, {}> {
    public render(): React.ReactElement<INews> {

        const newsTableCells = this.props.featuredNews.map((post, index) => {
            return (
                <NewsTableCell
                    post={post}
                    rowspan={index === 0 ? 2 : 1}
                />
            );
        });

        return (
            <table>
                {this.props.featured ?
                    <>
                        <tr>
                            { newsTableCells[0] }
                            { newsTableCells[1] }
                        </tr>
                        <tr>
                            { newsTableCells[2] }
                        </tr>
                    </>
                    : null
                }
            </table>
            
        );
    }
}

和

import * as React from 'react';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import styles from './SingleNews.module.scss';
import { ISingleNewsProps } from './ISingleNewsProps';

export interface INewsTableCellProps {
    post: ISingleNewsProps;
    rowspan: number;
}

export default class NewsTableCell extends React.Component<INewsTableCellProps, {}> {
    public render(): React.ReactElement<INewsTableCellProps> {
        
        const { post, rowspan } = this.props;
        
        return (
            <td rowSpan={rowspan}>
                <a
                    className={styles.singleNews}
                    href={post.link}
                    key={post.Title}
                >
                    <div
                        className={styles.singleNews__image}
                        style={{ backgroundImage: `url(${post.image})` }}
                    />
                    <div className={styles.singleNews__content}>
                        <div className={styles.singleNews__content__info}>
                            
                        {
                        post.Featured ==="Home Page Feature 1" ? <span className={styles.singleNews__content__info__label}>Featured News</span>
                        
                        :post.Featured === "Home Page Feature 2"?
                        
                        <span className={styles.singleNews__content__info__label}>Coorporate News</span>:

                        <span className={styles.singleNews__content__info__label}>People News</span>
                        }
                                
                                
                                
                            <span className={styles.singleNews__content__info__date}>
                                {post.date}
                            </span>
                        </div>
                    </div>
                    <div className={styles.singleNews__content}>
                        <div className={styles.singleNews__content__info}>
                            {(rowspan===2)?
                            
                            <h2 className={styles.singleNews__content__info__title__featured}>
                                {post.Title}
                            </h2>
                            :                        
                            
                                <h2 className={styles.singleNews__content__info__title}>
                                {post.Title}
                            </h2>}

                            
                            
                            
                            {post.likes ? (
                                <div
                                    className={styles.singleNews__content__info__reactions}
                                >
                                    <span
                                        className={
                                            styles.singleNews__content__info__reactions__likes
                                        }
                                    >
                                        <Icon iconName='Like' />
                                        {post.likes}
                                    </span>
                                    <span className={
                                            styles.singleNews__content__info__reactions__comments
                                        }>
                                        <Icon iconName='ActionCenter' />
                                        {post.coments}
                                    </span>
                                </div>
                            ) : null}
                        </div>
                    </div>
                </a>
            </td>
        );
    }
}

但我不想使用 Table 而我想使用 Grid，在纯 HTML 中我可以使用这个 HTML+CSS 创建它：-

<style>
grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-gap: 10px;
}

grid_item:first-child {
  grid-column: 1 / 3; /* span from grid column line 1 to 3 (i.e., span 2 columns) */
  grid-row: 1 / 3;    /* same concept, but for rows */
}

/* non-essential decorative styles */
grid_item {
  background-color: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
} 
    </style>
    <grid-container>
  <grid_item>A</grid_item>
  <grid_item>B</grid_item>
  <grid_item>C</grid_item>
</grid-container>

但是如何在我的 TypeScript 中创建这个网格呢？

我试过这个代码：-

export default class SingleNews extends React.Component<INews, {}> {
    public render(): React.ReactElement<INews> {

        const newsTableCells = this.props.featuredNews.map((post, index) => {
            return (
                <NewsTableCell
                    post={post}
                    rowspan={index === 0 ? 2 : 1}
                />
            );
        });

        return (
            <grid-container>
            <grid_item>A</grid_item>
            <grid_item>B</grid_item>
            <grid_item>C</grid_item>
          </grid-container>
            // <table>
            //     {this.props.featured ?
            //         <>
            //             <tr>
            //                 { newsTableCells[0] }
            //                 { newsTableCells[1] }
            //             </tr>
            //             <tr>
            //                 { newsTableCells[2] }
            //             </tr>
            //         </>
            //         : null
            //     }
            // </table>
            
        );
    }
}

但我得到了这个错误：-

Property 'grid-container' does not exist on type 'JSX.IntrinsicElements'

谢谢

Answer 1

应该这样做...它是静态宽度和高度，因此需要对动态宽度和高度进行一些修改。我添加了媒体查询，因此单元格将在移动设备上垂直堆叠，但应该是您尝试为桌面执行的布局。

    .container {

      display: inline-flex;
      flex-direction: column;

    }

    @media only screen and (min-width: 600px) {
      .container {

        display: flex;
        flex-direction: row;

      }
    }


    .column-1 {
      background: #7FCED5;
      width: 400px;
      height: 400px;
      display: flex;
    }

    @media only screen and (min-width: 600px) {
      .column-1 {
        background: #7FCED5;
        width: 400px;
        height: 400px;
        display: inline-flex;
        padding: 0;

      }
    }


    .column-2 {
      width: 200px;
      grid-template-columns: 100px 100px;
      flex-direction: column;
      grid-gap: 0;
    }

    .column-2 div {
      height: 400px;
      width: 400px;
      background: #EFF2F5;
    }

    @media only screen and (min-width: 600px) {
      .column-2 div {
        height: 200px;
        width: 200px;
        background: #EFF2F5;
      }
    }

    #cell-1 {
      background: #FFBDBD;
    }

    #cell-2 {
      background: #7FB9D5;
    }

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />


</head>

<body>

  <div class="container">
    <div class="column-1">
    </div>

    <div class="column-2">
      <div id="cell-1"></div>
      <div id="cell-2"></div>
    </div>
  </div>


</body>

</html>