如何在 React 中显示或隐藏元素？

ReactJS 是一个基于组件的完整架构，用于创建出色的 UI 和开发人员组件。在任何 React 应用程序中，都是关于组件的，因此通常我们必须使用新组件来开发丰富的用户界面。因此，根据不同的情况，如果我们在某处需要它们，我们必须隐藏或显示一些组件。

为了实现这种显示和隐藏组件的功能，我们应该有一些 id，一些键值，通过使用这些值，我们可以使用在特定条件下工作的不同运算符来修改 UI 中组件的可见性。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```

在 ReactJS 中隐藏或显示组件正如我们上面所讨论的，我们必须创建一些组件并将它们渲染到单个父文件中以执行条件，以便我们可以将显示或隐藏功能应用于某些特定组件。让我们创建三个子组件，并在 src 文件夹中将它们命名为Child1.js 、 Child2.js和Child3.js 并将以下代码粘贴到相应的文件中。

Child1.js：

Javascript

import React, { Component } from "react";
  
class Child1 extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }
  
  render() {
    return This is how GFG child component 
                number 1 looks like.;
  }
}
  
export default Child1;

Javascript

import React, { Component } from "react";
  
class Child2 extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }
  
  render() {
    return This is how GFG child component 
                number 2 looks like.;
  }
}
  
export default Child2;

Javascript

import React, { Component } from "react";
  
class Child3 extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }
  
  render() {
    return This is how GFG child component 
                number 3 looks like.;
  }
}
  
export default Child3;

Javascript

import React, { Component } from "react";
import { render } from "react-dom";
import Child1 from "./Child1";
import Child2 from "./Child2";
import Child3 from "./Child3";
  
class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React",
      shchild1: false,
      shchild2: false,
      shchild3: false
    };
    this.hideComponent = this.hideComponent.bind(this);
  }
  
  hideComponent(varname) {
    console.log(varname);
    switch (varname) {
      case "shchild1":
        this.setState({ shchild1: !this.state.shchild1 });
        break;
      case "shchild2":
        this.setState({ shchild2: !this.state.shchild2 });
        break;
      case "shchild3":
        this.setState({ shchild3: !this.state.shchild3 });
        break;
      default: return;
    }
  }
  
  render() {
    const { shchild1, shchild2, shchild3 } = this.state;
    return (
      
        {shchild1 && }
        
        {shchild2 && }
        
        {shchild3 && }
        
        
          
          
          
        
      
    );
  }
}
  
export default App;

Child2.js：

Javascript

import React, { Component } from "react";
  
class Child2 extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }
  
  render() {
    return This is how GFG child component 
                number 2 looks like.;
  }
}
  
export default Child2;

Child3.js：

Javascript

import React, { Component } from "react";
  
class Child3 extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }
  
  render() {
    return This is how GFG child component 
                number 3 looks like.;
  }
}
  
export default Child3;

现在是时候将所有这些子 JS 文件合并到主父文件中了，我们可以在其中设置一些特定条件来显示或隐藏一些特定组件。因此，让我们创建主文件名App.js并将以下代码粘贴到其中。

现在在App.js文件中定义三个不同的布尔变量。

constructor() {
  super();
  this.state = {
    name: "React",
    shchild1: false,
    shchild2: false,
    shchild3: false
  };
}

最初，我们将默认值分配给所有三个布尔变量作为 false，然后，我们将使用这些变量来显示隐藏App.js文件中的任何特定组件。

应用程序.js：

Javascript

import React, { Component } from "react";
import { render } from "react-dom";
import Child1 from "./Child1";
import Child2 from "./Child2";
import Child3 from "./Child3";
  
class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React",
      shchild1: false,
      shchild2: false,
      shchild3: false
    };
    this.hideComponent = this.hideComponent.bind(this);
  }
  
  hideComponent(varname) {
    console.log(varname);
    switch (varname) {
      case "shchild1":
        this.setState({ shchild1: !this.state.shchild1 });
        break;
      case "shchild2":
        this.setState({ shchild2: !this.state.shchild2 });
        break;
      case "shchild3":
        this.setState({ shchild3: !this.state.shchild3 });
        break;
      default: return;
    }
  }
  
  render() {
    const { shchild1, shchild2, shchild3 } = this.state;
    return (
      
        {shchild1 && }
        
        {shchild2 && }
        
        {shchild3 && }
        
        
          
          
          
        
      
    );
  }
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：由于我们在启动时声明了三个布尔变量并将默认值设置为false，并且我们还制作了三个子组件，这些子组件在主文件中进一步呈现，因为我们需要隐藏或显示组件。如果我们将布尔值设置为 true，那么只有特定的组件将被渲染，否则默认情况下它不会渲染，因此将处于隐藏阶段。通过单击创建的不同按钮，我们可以切换案例以更改布尔变量的值。

当我们单击单击事件按钮时，它只是通过发送字符串作为输入来更新变量的值，在这种情况下，该按钮已被单击，并根据变量中更新的值决定是否必须显示该组件或隐。使用类似的方法，我们也可以在 ReactJS 中隐藏或显示元素。

如果用户没有点击任何按钮，以下将是输出：
如果用户单击所有按钮，以下将是输出：