Javascript 屏幕大小<；时如何删除（仅）父元素；875px在反应中？

对于一个组件，我在元素周围创建了一个LINK元素，这样它就可以作为链接使用。但这只需要在桌面上。在移动设备上（最大宽度：875），应移除链接。我该怎么做

在移动设备上，它不应作为按钮工作

问题是，我不能使用display:none，因为这将删除整个元素

我已经评论了哪些链接必须删除

import React, { Component } from 'react';

import LogoMobileHero from '../assets/logo-diensen_project.svg';

class HeroMain extends Component {
  state = { showMenu: false };

  toggleMenu = () => {
    this.setState({
      showMenu: !this.state.showMenu,
    });
  };



  render() {
    const { showMenu } = this.state;
    const menuVis = !showMenu ? 'hideDiv' : '';
  

    return (
      <div onClick={this.toggleMenu}>
        {/* This line beneath should remove */}
        <a href="/projecten/" className="mobileNot"> 
        <div className='hero-element'>
          <article>
            <div className='hero-element-titel'>
              <LogoMobileHero
                className='desktop-hero-logo projecten-logo'
                fill='#73a400'
              />
              <LogoMobileHero
                className='mobile-hero-logo mobile'
                fill='#73a400'
              />
              <span className='mobile-hero-button'>
                <span>{'>'}</span>
              </span>
            </div>
            <div className='hero-element-text'>
              <p>
                Het gebruik van rope access is efficiënt en effectief. Door het
                gebruik van gespecialiseerde rope access technieken zijn wij in
                staat op moeilijke toegankelijke locaties werkzaamheden uit te
                voeren.
              </p>
            </div>
          </article>
          <div className='hero-element-image'>
            <a href='/projecten/' className='hero-element-image__link'>
              Projecten
            </a>
          </div>
        </div>

        {menuVis ? (
          <> </>
        ) : (
          <article className="home-hero-mobile mobile">
            <div className={`mobile container-info-mobile project`}>
              <p>
                Het gebruik van rope access is efficiënt en effectief. Door het
                gebruik van gespecialiseerde rope access technieken zijn wij in
                staat op moeilijke toegankelijke locaties werkzaamheden uit te
                voeren.
              </p>
              <a href='/projecten/'>projecten</a>
            </div>
          </article>
        )}
        {/* This line beneath should remove */}
        </a>
      </div>
    );
  }
}

export default HeroMain;

import React，{Component}来自'React'；
从“../assets/logo-diensen_project.svg”导入LogoMobileHero；
类HeroMain扩展组件{
状态={showMenu:false}；
切换菜单=（）=>{
这是我的国家({
showMenu:！this.state.showMenu，
});
};
render（）{
const{showMenu}=this.state；
常量菜单=！showMenu？'hideDiv'：''；
返回(
{/*下面的这一行应该删除*/}
{梅努维斯(
) : (
)}
{/*下面的这一行应该删除*/}
);
}
}
导出默认的HeroMain；

我知道如何使用React with Hook来实现这一点，但这个想法应该对您有用

 const [showLink, setShowLink] = useState(false);

  useEffect(() => {
    if (window.matchMedia("(max-width: 700px)").matches) {
      setShowLink(false);
      // alert("matches");
    } else {
      setShowLink(true);
    }
  }, []);

  return (
    <a
      href={showLink ? "https://www.google.com" : ""}
      style={
        showLink
          ? { textDecoration: "underline", color: "blue" }
          : { textDecoration: "none", color: "black" }
      }
    >
      <div className="App">
        <h1>Hello world</h1>
      </div>
    </a>
  );
}

我有一个名为showLink的状态，初始值为true，我正在检查宽度是否超过700px，这意味着它适用于平板电脑和更高版本，我正在将showLink更改为false

 <a
      href={showLink ? "https://www.google.com" : ""}
      style={
        showLink
          ? { textDecoration: "underline", color: "blue" }
          : { textDecoration: "none", color: "black" }
      }
    >

我正在通过检查showLink值来进行一些有条件的渲染，如果为true，则href将链接到google，如果不是，则它将为空，因此它不会链接到任何地方。使用相同的策略，我给它条件样式，使它看起来像一个链接，或使它看起来像一个基于showLink值的普通元素

---

希望这有帮助：）

css媒体查询如我所说，显示无一不起作用，可见性：隐藏相同。或者你有不同的CSS想法吗？删除是指隐藏该链接，对吗？是的，我想在移动设备上隐藏/删除它。@boxdox-但关键是（阅读问题），孩子们必须始终可见。这只是OP希望手机上“不存在”的链接。

 <a
      href={showLink ? "https://www.google.com" : ""}
      style={
        showLink
          ? { textDecoration: "underline", color: "blue" }
          : { textDecoration: "none", color: "black" }
      }
    >