React：使用 Animate on Scroll 库条件渲染 CSS 类答案

【问题标题】：React: Conditional rendering CSS classes with Animate on Scroll libraryReact：使用 Animate on Scroll 库条件渲染 CSS 类
【发布时间】：2019-11-23 03:57:12
【问题描述】：

我在一个项目中使用 Animate on Scroll 库和 React-Bootstrap。使用以下代码应用动画：

      <Row>
        <Col xs={{span: 12}} 
             md={{span: 8, offset: 2}}                               
             data-aos="fade-right">
          <H2>Header</H2>
          <P>
            paragraph content
          </P>
        </Col>
      </Row>

data-aos="fade-right" 正确应用动画。但是，我只希望用户在桌面上查看网站时应用动画。我熟悉媒体查询，但我不确定如何应用此 data-aos="fade-right"，以便它仅适用于台式机，而不适用于平板电脑或移动设备。

我可以使用 React 的条件渲染仅在浏览器宽度为 786px+ 时应用 data-aos="fade-right" 吗？

如何抓取浏览器的宽度，确保为 768px 或更大，然后将data-ose="fade-right" 应用到 Bootstrap Col，以便动画只在大屏幕上运行？

我尝试在三元运算符中使用 window.innerWidth，但出现了一些错误：

      <Row>
        <Col xs={{span: 12}}
             md={{span: 8, offset: 2}}
             {`${window.innerWidth > '700px' ? "data-aos="fade-right"" : ""}`}>
          <H2>Header</H2>
          <P>
            paragraph content
          </P>
        </Col>
      </Row>

这样做的正确方法是什么？

【问题讨论】：

标签： css reactjs class ternary conditional-rendering

【解决方案1】：

用div标签封装代码

   <div style={{ /*your media queries */ }} ></div>

【讨论】：

【解决方案2】：

您需要使用div 之类的包装器来包装您的内容，然后使用条件渲染，

条件，

const showAnimation = window.innerWidth > 700

用法

<Row>
   <Col xs={{span: 12}} md={{span: 8, offset: 2}}>
     {showAnimation ? (
        <div className="aos-animate" data-aos="fade-right">
          <h2>Header</h2>
          <p>paragraph content</p>
        </div>
     ) : (
        <div>
          <h2>Header</h2>
          <p>paragraph content</p>
        </div>
     )}
   </Col>
</Row>

Demo

【讨论】：

当使用上面的演示链接尝试调整输出部分宽度。

【解决方案3】：

`const showAnimation = window.innerWidth > 700

data-aos={showAnimation ?"": "fade-in"}`

【讨论】：