在 React 中，当屏幕尺寸 < 875px 时如何删除（仅）父元素？

Question

对于一个组件，我在该元素周围制作了一个 LINK 元素，因此它可以用作 link。但这只需要在桌面上。在移动设备上（最大宽度：875），应删除 Link。我该怎么做？

在移动设备上，它不应作为按钮使用。

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

我已评论 link 必须删除。

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;

Answer 1

我知道如何通过使用带钩子的 React 来做到这一点，但这个想法应该对你有用，

 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>
  );
}

我在 Mount 上检查屏幕尺寸，所以它只会发生一次。

if (window.matchMedia("(max-width: 700px)").matches) {
      setShowLink(false);
      // alert("matches");
    } else {
      setShowLink(true);
    }

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

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

我正在通过检查 showLink 值进行一些条件渲染，如果为真，则 href 将 linking 为 google，否则它将为空，因此不会 [=24] =] 任何地方。使用相同的策略，我为其提供条件样式，使其看起来像 link 或使其看起来像基于 showLink 值的普通元素。

希望这对您有所帮助:)

在 React 中，当屏幕尺寸 < 875px 时如何删除（仅）父元素？

How to remove (only) the parent element when screen size < 875px in React?

javascript

css

reactjs

responsive