React+TypeScript项目中如何用Grid替代table实现2行2列3单元格布局

报错原因 #

你遇到的报错是因为<grid-container>、<grid_item>不属于HTML原生标准标签，React + TypeScript的JSX语法默认不识别未声明的自定义原生标签，所以抛出了Property 'grid-container' does not exist on type 'JSX.IntrinsicElements'错误。正确实现需要使用标准div标签配合CSS Grid属性完成布局。

实现步骤 #

1. 添加Grid布局样式

在SingleNews.module.scss中新增以下样式：

// 网格容器样式
.news-grid-container {
  display: grid;
  // 2列等宽布局，可按需调整比例
  grid-template-columns: repeat(2, 1fr);
  // 2行高度自适应内容，可按需固定高度
  grid-template-rows: repeat(2, auto);
  // 单元格间距，按需调整
  gap: 10px;
}

// 第一个新闻项跨2行
.news-grid-item:first-child {
  grid-row: 1 / span 2;
}

2. 修改SingleNews组件

替换原有table结构为Grid容器：

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> {
        if (!this.props.featured || !this.props.featuredNews?.length) {
            return <></>;
        }

        const newsGridItems = this.props.featuredNews.map((post, index) => {
            return (
                <div key={post.Title} className={styles['news-grid-item']}>
                    <NewsTableCell
                        post={post}
                        rowspan={index === 0 ? 2 : 1}
                    />
                </div>
            );
        });

        return (
            <div className={styles['news-grid-container']}>
                {newsGridItems}
            </div>
        );
    }
}

3. 修改NewsTableCell组件

替换外层td标签为普通div：

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 (
            <div>
                <a
                    className={styles.singleNews}
                    href={post.link}
                >
                    <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>
            </div>
        );
    }
}

内容的提问来源于stack exchange，提问作者John John