检查是否设置了最小宽度

Question

我正在使用Tachyons媒体查询来创建自适应布局：

render() {
  const { UI } = this.props.state

  const containerStyle = {
    //right: `${UI.isMenuOpened ? 0 : `calc(-16rem + 4rem)`}`, // if min-width is setted
    right: `${UI.isMenuOpened ? 0 : `calc(-40% + 4rem)`}`, // if min-width is not setted
  }

  return (
    <div
      className="bg-gray w-40 min-w5 h-100 absolute o-50 flex transition"
      style={containerStyle}
    >
     //...
    </div>
  )
}

如您所见，我希望div的宽度改变：40%和min-width = w5（16rem）。 问题是我不知道如何更改right中的containerStyle值。 在calc(A + B)中，A是代表div的宽度，B是代表填充（总是4rem）。 我需要更改A：将40%设置为min-width，如果将w5设置为min-width。

我该怎么做？

Answer 1

由于min-width的默认值为0，因此只需使用布尔类型强制（0 == false）进行检查：

right: `${UI.isMenuOpened ? 0 : `calc(${elem.style.minWidth ? "-40%" : "w5"} + 4rem)`}`