Question

我有一个按钮组件，仅在需要时显示（用于向下翻页，因此不会显示在第一页上）。

我已使用以下代码完成了此操作：

         <button 
            id="hidemeonmain"
            onClick={this.pageDown}
            className={this.state.count <2 
              ? 'hidden' 
              : 'clean' }
          > 
        <FontAwesomeIcon 
          icon="angle-left" 
          size="2x"
        />
        </button>

但是，在对max-width 736px FOR STATE OF STATES STATE的@media查询时，我想隐藏此按钮。

我正在通过给它一个ID并将其隐藏在CSS中来做到这一点。但是，当状态更新时，即使使用{media !important样式的display:none，它也会重新显示按钮。

我认为id和Important优先于一般类。

有什么想法请解决吗？

TIA

编辑：我已经用正确的按钮修改了它！并包含#id CSS。

 #hidemeonmain {
    display: none !important;

我认为正在发生的事情是，当按下另一个按钮（递增）时，这会增加状态，因此会影响三元组的类更改，三元组会用display: hidden !important;覆盖#id

Answer 1

您可以使用window.innerWidth属性代替用css隐藏它，它将为您提供用户浏览器的innerWidth（如果您使用console.log它将看到），那么您可以使用它添加一个您元素的隐藏类（在您的情况下）您的按钮！

类似以下内容：

<button 
  onClick={this.pageUp}
  className={
     this.state.count+3 > data.allMarkdownRemark.totalCount && // your condition
     window.innerWidth < 736 // responsive rule represented by javaScript
     ? 'hidden' 
     : 'clean'}
     >
       <FontAwesomeIcon 
          icon="angle-right"
          size="2x"
          />
 </button>

也是更重要的说明。将一些操作代码存储在变量中是一个好习惯。在我们的情况下，您可能需要将window.innerWidth的值存储在return( ... )之前的变量中，并在变量{strong> inside return( ... )中使用变量。如下所示：

class myComponent extends React.Component {


  ... some methods and lifeCycles


  render() {

    const _innerWidth = window.innerWidth

    return(

      ...some JSX

      <button 
      onClick={this.pageUp}
      className={
         this.state.count+3 > data.allMarkdownRemark.totalCount && // your condition
         _innerWidth < 736 // responsive rule represented by javaScript
         ? 'hidden' 
         : 'clean'}
         >
           <FontAwesomeIcon 
              icon="angle-right"
              size="2x"
              />
     </button>

     ...some more jsx

    )
  }
}

反应CSS优先级

1 个答案: