使用@artsy/fresnel框架的条件语句

Question

我正在使用@artsy/fresnel npm包构建一个响应式的React应用程序。

这是我的代码

<Media greaterThanOrEqual='computer'>
    <div style={{ padding: '20px 50px' }}>
           Some Content Goes Here                               
    </div>
</Media>

<Media lessThan='computer'>
    <div style={{ padding: '50px 100px' }}>
           Exact Same Content Goes Here                               
    </div>
</Media>

我搜索了整个文档，但找不到一种方法来设置div的填充，这取决于呈现的Media标签。我想要达到这样的效果

<div style={{ padding: (MediaIsGreaterThanComputer ? '20px 50px' : '50px 100px') }}>
    Some Content Goes Here
</div>

这在@artsy/fresnel框架中是可行的吗？

Answer 1

您可以这样做，但您需要控制由Media组件发出的包装器div (请参阅the note about “render-props”)。所以就像这样：

<Media greaterThanOrEqual='computer'>
  {(mediaClassNames, renderChildren) => {
    return (
      <div style={{ padding: '20px 50px' }}>
        {renderChildren ? "Some Content Goes Here" : null}
      </div>
    )
  }}
</Media>