React - 根据查询字符串参数值有条件地显示块

Question

我有一个使用 React 的应用程序。它包括 React 路由器。在我的一个组件中，我需要读取查询字符串，如果查询字符串参数有值，则有条件地显示一个块。如果查询字符串中不存在该值，我想显示另一个块。

import React, {Component} from 'react';
import {Container} from 'reactstrap';
import {NavMenu} from './NavMenu';

export class Layout extends Component {
  static displayName = Layout.name;

  render() {
    return {
      <div>
        <NavMenu />  <!-- I want to hide this is query string has hideNav=true -->
        <Container>  <!-- I want to use a fluid layout if the query string has hideNav=true -->
          {this.prop.children}
        </Container>
      </div>
    }
  }
}

如何根据查询字符串值有条件地呈现内容。

Answer 1

假设您的反应路由器路由中有参数，您可以通过this.props.match.params 获取这些参数：

export class Layout extends Component {
  static displayName = Layout.name;

  render() {
    const {hideNav} = this.props.match.params;
    return {
      <div>
        {!hideNav && <NavMenu />} // Render NavMenu if hideNav is false
        <Container fluid={hideNav}>  
          {this.prop.children}
        </Container>
      </div>
    }
  }
}

Answer 2

您好，请检查这些基于条件的示例

class Layout extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hideNave: false
    }
  }
  componentDidMount() {
    axios.get('http://url')
      .then(res => {
        if (res.date) {
          this.setState({
            hideNave: true
          })
        }
      });
  }
  render() {
    return
    (<div>
      { this.state.hideNave ?  (<NavMenu />) :  (<Container> {this.prop.children} </Container>) }
    </div>)
  }
}

Answer 3

只是为了代表一个简单的例子，让我建议一个带有查询字符串参数的 URL，代码操作是什么。它被称为hideNav，如下所示：

https://yourawesomewebsite.com/?hideNav=true

第一步：

我们需要在render 方法中获取您需要使用的查询字符串。获取查询参数的方式有很多种，我在这里总结一下：

1.使用窗口对象

let queryString = new URLSearchParams(window.location.search);
let hideNav = queryString.get('hideNav');

在this link 中进一步了解URLSearchParams。从提到的 URL 中突出显示：

URLSearchParams 接口定义了处理 URL 查询字符串的实用方法。

2。使用 React Router 方式

let queryString = this.props.match.params;
let hideNav = queryString.hideNav;

如果您想进一步阅读，请关注this link。另外，让我在这里强调一下关键点：

params - (object) 从对应于路径动态段的URL解析出来的键/值对

作为第二步：

代码需要使用基于值的条件渲染。

import React, {Component} from 'react';
import {Container} from 'reactstrap';
import {NavMenu} from './NavMenu';

export class Layout extends Component {
  static displayName = Layout.name;

  render() {
    const hideNav = // here you can decide based on the above explanation which one you want to use

    return {
      <div>
        { !hideNav ? <NavMenu /> : null }
        <Container fluid={hideNav}>
          {this.prop.children}
        </Container>
      </div>
    }
  }
}

关于fluid容器你可以进一步阅读here：

fluid (boolean) - 允许 Container 填充所有可用的水平空间。

所以基本上一旦hideNav 值是true 就渲染NavMenu，而不是React 渲染null。在Container 上，代码使用fluid 属性来操作水平空间。