javascript - 为网格指定多个反向条件

Question

在普通的语义 UI 中，我们可以这样做:

<div class="ui mobile reversed tablet reversed equal width grid container">

这将在移动设备和平板电脑分辨率上以相反的顺序显示列。 Example

我正在尝试使用 Semantic UI React 实现相同的行为，但我没有这样做。

这是我尝试过的:

<Grid reversed="computer tablet">
// or
<Grid reversed="computer,tablet">
// or
<Grid reversed="computer|tablet">
// or
<Grid reversed={["computer","tablet"]}>

所有结果都会出现类似的错误消息:

Warning: Failed prop type: Invalid prop reversed of value computer,tablet supplied to GridRow, expected one of ["computer","computer vertically","mobile","mobile vertically","tablet","tablet vertically"].

有没有办法实现这个，或者这是语义 UI React 中缺少的功能？

---

目前，我正在使用以下变通方法，它非常难看:

const content = [<Grid.Row key="row1">...</Grid.Row>, <Grid.Row key="rowN">...</Grid.Row>]
<Grid reversed="computer" only="computer">
  {content}
</Grid>
<Grid reversed="tablet" only="tablet">
  {content}
</Grid>
<Grid only="mobile">
  {content}
</Grid>

Answer 1

您可以使用网格的 className 属性:

<Grid className='table reversed computer reversed' />

该 Prop 是可用的，可以在这个 doc 中看到.