【React】React获取URL参数,根据URL参数隐藏页面元素

React获取URL参数,根据URL参数隐藏页面元素

AI推荐方法

如果您想使用React获取URL参数并相应地隐藏页面元素,可以按照以下步骤进行操作:

导入React和React DOM:

javascript 复制代码
import React from 'react';
import ReactDOM from 'react-dom';

创建组件:

javascript 复制代码
class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    // 初始化state
    this.state = {
      visible: true
    };
  }

  componentWillMount() {
    // 获取URL参数
    const param = new URLSearchParams(window.location.search).get('param');

    // 如果param等于某个特定的值,则隐藏元素
    if (param === 'hidden') {
      this.setState({
        visible: false
      });
    }
  }

  render() {
    return (
      <div>
        {this.state.visible && <p>这是可见的元素</p>}
        {!this.state.visible && <p>这是隐藏的元素</p>}
      </div>
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));
  1. 在组件的componentWillMount()生命周期方法中,使用window.location.search获取URL参数,并检查参数是否等于特定值。如果是,则在组件的状态中设置visiblefalse
  2. 在组件的render()方法中,使用{}括号及逻辑表达式在需要的时候显示或隐藏元素。

需要注意的是,componentWillMount()生命周期方法只会在组件挂载之前调用一次,之后不会再调用。如果您需要在URL参数改变时重新检查并更新元素的显示状态,可以考虑使用componentDidMount()生命周期方法或React Router的相关功能。

根据取参数案例实现

url取参数

复制代码
const params = new URLSearchParams(window.location.search);
const key = params.get('domFlag');

react页面

复制代码
<Router>
    <ScrollToTop />
    <LocationPathnameLogger />
    <RootContextProviders>
      <GlobalStyles />
      {domFlag !=='hide' && <Menu data={menu} isFrontendRoute={isFrontendRoute} />}
      <Switch>
        {routes.map(({ path, Component, props = {}, Fallback = Loading }) => (
          <Route path={path} key={path}>
            <Suspense fallback={<Fallback />}>
              <ErrorBoundary>
                <Component user={user} {...props} />
              </ErrorBoundary>
            </Suspense>
          </Route>
        ))}
      </Switch>
      <ToastContainer />
    </RootContextProviders>
  </Router>
相关推荐
软件技术NINI1 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front2 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie2 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀3 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻3 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树3 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔3 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城3 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
Asthenia04124 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj504 小时前
前端基础之《React(1)—webpack简介》
前端·react