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

Question

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

对于我的用例，td（可能还有th）个标记中的内容可能是字符串，数字或富节点。

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

我检查了两种方法。

1. 第一个是基于Javascript的，就像基于jQuery的StackTable，我从中包含图像。它将表转换为表+卡表组合，然后使用提供的媒体查询显示 表或卡表。 cardtable函数遍历表格，并从每一行生成两列键值表格。

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

2. 第二个使用纯CSS，例如CSS Tricks中的这个。

   /* 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"; }
   

   ＆＃34;内容＆＃34;但是，似乎不管怎样，我们必须在其他DRY代码库中维护内容的复制粘贴。但我希望React会更容易。

堆叠式响应表的示例：

全桌：



响应：

Answer 1

我能想到的唯一React特定的事情是，如果你想将代码的某些部分（JSX中的几个元素）分开到另一个组件you also have to wrap it in a separate DOM element，这在像表这样的环境中尤其有问题。 （You can see my approach to this problem here.）

请注意，在创建React库时，您还需要做出一个决定：如何处理CSS。有些人喜欢CSS directly in JS，有些others don't。 （我的经验是，最好还是将这两个分开，因为如果你在JS中有CSS，你就不能使用，例如，媒体查询！）。

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