我应该使用JS事件或CSS媒体查询与React响应表吗？

Question

我希望用React制作堆叠的响应表.为避免在小屏幕中水平滚动,每行显示为迷你表格; 请参阅附带的图片.

对于我的用例,td(和可能th)标签中的内容可以是字符串,数字或富节点.

我想在React中实现相同的功能,因为还没有库存在.什么是好方法？

---

我研究了两种方法.

1. 第一个是基于Javascript的,就像基于jQuery的StackTable,我从中包含了图像.原来的表到表+桌牌组合,然后使用提供的媒体查询,以显示任何表或卡表.cardtable函数遍历表并从每行生成两列键值表.

   这似乎很容易做出反应:渲染表和卡表并使用媒体查询来显示任何一个.但是在多个地方渲染相同的节点(而不是字符串)是安全的吗？th将为实际表头和每一行呈现每个元素.

2. 第二个使用纯CSS,例如来自CSS Tricks的CSS.

   /* if media query */
   table, thead, tbody, th, td, tr { 
       display: block; 
   }
   td:nth-of-type(1):before { content: "First Name"; }
   td:nth-of-type(2):before { content: "Last Name"; }
   td:nth-of-type(3):before { content: "Job Title"; }
   

   然而,"内容"似乎是不确定的,我们必须在其他DRY代码库中维护内容的复制粘贴.但我希望React会更容易.

---

堆叠响应表的示例:

全表:

响应:

Answer 1

我在这里能想到的唯一特定于 React 的事情是，如果你想将代码的某些部分（JSX 中的几个元素）分离到另一个组件，你还必须将其包装在一个单独的 DOM 元素中，这在像这样的环境中尤其成问题表。（你可以在这里看到我解决这个问题的方法。）

请注意，在创建 React 库时，您还需要做出一个决定：如何处理 CSS。有些人喜欢直接在 JS 中使用 CSS，有些人则不喜欢。（我的经验是，最好还是将这两者分开，因为如果你在 JS 中使用 CSS，则无法使用媒体查询等功能！）。

除此之外，我认为您的任务就像在任何其他场景中使用任何其他框架或库实现响应能力一样。您将从这些方法中获得与其他方法相同的优点和缺点。一般来说，媒体查询是由浏览器处理的，这意味着当您调整浏览器大小（或旋转手机）时，您的内容将自动更改布局。另一方面，在 JS 中，您可以查看组件的可用空间（请注意，在 CSS 中，您只有视口大小），这可以让您有机会轻松地将这些表格嵌入到桌面站点的狭窄列中。