如何有条件地设置语义 UI React Grid 列的宽度 属性？

Question

我想根据另一个值有条件地设置下面各列的宽度，但是当我尝试将数字常量更改为变量时，出现 Typescript 错误，提示它们只能设置为离散值。有条件地设置这个 属性 的好方法，还是我必须为每个案例写一个网格列？

          <Grid>
            <Grid.Row>
              <Grid.Column width={4}>
                <Image src={"http://localhost:5000/img/" + image} />
              </Grid.Column>
              <Grid.Column width={12}>
                <Card />
              </Grid.Column>
            </Grid.Row>
          </Grid>

Answer 1

如果您要更改 width 道具中的值，您可以在其中使用 ternary operator。像这样：

<Grid.Column width={ condition ? <column number if true> : <column number if false> } />

不确定这是否是最好的方法，但这种方法帮助我构建了 SUI-R 中的内容。