React中如何在屏幕尺寸<875px时仅移除父级a标签元素

实现思路 #

通过监听视口宽度做响应式条件渲染，桌面端（宽度>875px）正常渲染外层<a>标签实现跳转，移动端直接用React.Fragment替代<a>标签，不会生成额外DOM节点，也不会影响内部元素的渲染，完全满足移除a标签且不隐藏内部内容的需求。

完整修改后代码 #

import React, { Component } from 'react';

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

class HeroMain extends Component {
  state = { 
    showMenu: false,
    isDesktop: window.innerWidth > 875 // 初始化判断是否为桌面端
  };

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

  handleResize = () => {
    this.setState({
      isDesktop: window.innerWidth > 875
    })
  }

  componentDidMount() {
    window.addEventListener('resize', this.handleResize)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize)
  }

  render() {
    const { showMenu, isDesktop } = this.state;
    const menuVis = !showMenu ? 'hideDiv' : '';
    // 动态选择外层包裹标签
    const OuterWrapper = isDesktop ? 'a' : React.Fragment;
    // 外层标签的属性，移动端Fragment不需要传属性
    const wrapperProps = isDesktop ? {
      href: "/projecten/",
      className: "mobileNot"
    } : {}

    return (
      <div onClick={this.toggleMenu}>
        <OuterWrapper {...wrapperProps}>
          <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>
          )}
        </OuterWrapper>
      </div>
    );
  }
}

export default HeroMain;

改动说明 #

• 新增isDesktop状态标记当前设备类型，挂载时初始化、窗口大小变化时自动更新
• 用动态组件OuterWrapper处理外层包裹逻辑，桌面端渲染<a>标签，移动端渲染不产生真实DOM的React.Fragment
• 完全移除了移动端场景下的外层a标签，没有使用display:none属性，不会影响内部元素的正常展示

如果不需要动态监听窗口 resize（比如只需要页面加载时判断一次设备类型），可以去掉resize事件监听，只在componentDidMount里做一次判断即可，性能更高。

内容的提问来源于stack exchange，提问作者Victor Laforga