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

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

AI推荐方法

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

导入React和React DOM：

import React from 'react';
import ReactDOM from 'react-dom';

创建组件：

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 (
      

        {this.state.visible && 
这是可见的元素
}
        {!this.state.visible && 
这是隐藏的元素
}
      
    );
  }
}

ReactDOM.render(, document.getElementById('root'));

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

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

根据取参数案例实现

url取参数

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

react页面

    
    
    
      
      {domFlag !=='hide' && }
      
        {routes.map(({ path, Component, props = {}, Fallback = Loading }) => (
          
            }>
              
                
              
            
          
        ))}