在 React Js 中的 TypeScript 中创建一个包含 2 列、2 行和 3 个单元格的网格
Posted
技术标签:
【中文标题】在 React Js 中的 TypeScript 中创建一个包含 2 列、2 行和 3 个单元格的网格【英文标题】：Create a Grid which contain 2 columns and 2 rows and 3 cells inside TypeScript inside React Js 【发布时间】：2022-01-05 18:15:29 【问题描述】：我想构建一个 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'
谢谢
【问题讨论】：
【参考方案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>【讨论】：
感谢您的回复...现在我不想添加任何静态宽度或高度...所以我从 CSS 中删除这些值，我将获得网格但第一列只会占据垂直空间的一半，而我希望第一列的单元格占据整个垂直空间（所以第一列的高度=第二列的高度）以上是关于在 React Js 中的 TypeScript 中创建一个包含 2 列、2 行和 3 个单元格的网格的主要内容，如果未能解决你的问题，请参考以下文章
如何在 React.js Typescript 版本中使用不支持 typescript 的 javascript 包
Storybook 在 React、Next.JS、Typescript 项目中找不到组件
如何在 React TypeScript 中实现 e 和 props？
如何在 React 应用程序的 typescript 文件中导入 js 模块（使用绝对路径）？