如何显示和隐藏 ReactJS 组件

2020-11-02 08:00:00 · 飞浪

介绍 React是一个完全基于组件的架构，用于创建丰富的用户界面和组件。 React应用程序中的所有内容都是组件，所以我们大多数时间都必须摆弄组件；因此，我们可能必须根据具体情况隐藏或显

介绍

React 是一个完全基于组件的架构，用于创建丰富的用户界面和组件。

React 应用程序中的所有内容都是组件，所以我们大多数时间都必须摆弄组件；因此，我们可能必须根据具体情况隐藏或显示不同的组件。

要使用任何条件显示或隐藏任何组件，我们应该有值，并且基于这些值，我们可以使用不同的条件运算符隐藏或显示组件。

在本指南中，我们将学习在 React 中隐藏或显示组件的最简单方法。

在 React 中隐藏或显示组件

组件是一个单元，多个单元组合起来可以组成一个完整的应用程序。但如果我们想频繁隐藏或显示某个组件，该怎么办？

假设我们有一个名为Demo1的组件，我们想根据布尔值 true/false 隐藏它。我们可以使用不同的条件运算符来实现此功能。

创建三个不同的文件，分别名为Demo1.js、Demo2.js和Demo3.js，并将以下源代码行粘贴到其中：

Demo1.js

      import React, { Component } from "react";

class Demo1 extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return <div>This is Demo1 component</div>;
  }
}

export default Demo1;
    

Demo2.js

      import React, { Component } from "react";

class Demo2 extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return <div>This is Demo2 component</div>;
  }
}

export default Demo2;
    

Demo3.js

      import React, { Component } from "react";

class Demo3 extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return <div>This is Demo3 component</div>;
  }
}

export default Demo3;
    

所有这些文件都是子组件，或者说是独立组件，我们将把它们用在名为index.js的父组件中。

打开文件index.js并在状态中创建三个不同的变量，如下所示：

      constructor() {
    super();
    this.state = {
      name: "React",
      showHideDemo1: false,
      showHideDemo2: false,
      showHideDemo3: false
    };
  }
    

在状态对象中，我们有三个不同的布尔变量，默认值为false，这些变量将用于显示或隐藏特定组件。

我们将使用逻辑与运算符（&&）来根据条件以及按钮单击事件显示组件，如下面的示例所示。

Index.js

      import React, { Component } from "react";
import { render } from "react-dom";
import Demo1 from "./Demo1";
import Demo2 from "./Demo2";
import Demo3 from "./Demo3";

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React",
      showHideDemo1: false,
      showHideDemo2: false,
      showHideDemo3: false
    };
    this.hideComponent = this.hideComponent.bind(this);
  }

  hideComponent(name) {
    console.log(name);
    switch (name) {
      case "showHideDemo1":
        this.setState({ showHideDemo1: !this.state.showHideDemo1 });
        break;
      case "showHideDemo2":
        this.setState({ showHideDemo2: !this.state.showHideDemo2 });
        break;
      case "showHideDemo3":
        this.setState({ showHideDemo3: !this.state.showHideDemo3 });
        break;
      default:
        null;
    }
  }

  render() {
    const { showHideDemo1, showHideDemo2, showHideDemo3 } = this.state;
    return (
      <div>
        {showHideDemo1 && <Demo1 />}
        <hr />
        {showHideDemo2 && <Demo2 />}
        <hr />
        {showHideDemo3 && <Demo3 />}
        <hr />
        <div>
          <button onClick={() => this.hideComponent("showHideDemo1")}>
            Click to hide Demo1 component
          </button>
          <button onClick={() => this.hideComponent("showHideDemo2")}>
            Click to hide Demo2 component
          </button>
          <button onClick={() => this.hideComponent("showHideDemo3")}>
            Click to hide Demo3 component
          </button>
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));
    

让我们了解这个例子是如何工作的。

我们有三个不同的状态变量以及默认值。
我们导入了三个子组件，并使用了以下条件：只有从变量中获取true值时，才会渲染子组件。如果条件为true，则渲染子组件；否则，不会渲染。
我们有三个不同的按钮，单击每个按钮时，都会使用 switch case 附加事件，以改变状态变量的值。
点击事件叫做hideComponent()，用于根据按钮点击事件以及按钮名称来改变状态值，从而决定更新具体的状态值。

      switch (name) {
      case "showHideDemo1":
        this.setState({ showHideDemo1: !this.state.showHideDemo1 });
        break;
      case "showHideDemo2":
        this.setState({ showHideDemo2: !this.state.showHideDemo2 });
        break;
      case "showHideDemo3":
        this.setState({ showHideDemo3: !this.state.showHideDemo3 });
        break;
      default:
        null;
    }
    

从按钮单击事件中，我们将获得一个字符串，该字符串标识单击了哪个按钮。根据给定的字符串，将更新相应的状态值。

这就是我们根据状态值和逻辑与运算符直接显示或隐藏组件的方法。其他方法也是可行的。例如，我们可以使用逻辑非(!)和逻辑或运算符(||)。

这是根据条件隐藏或显示组件的示例，但也可以隐藏或显示元素。让我们在本指南的下一部分中看看它是如何工作的。

在 React 中隐藏或显示元素

我们已经看到了如何隐藏或显示组件的示例，但我们可能需要隐藏或显示特定元素。我们可以使用另一种方法来做到这一点。

让我们直接跳到示例，我们将创建一个简单的表单以及两个输入框和一个提交按钮。

创建一个名为Demo4.js的新文件并粘贴以下源代码行。

      import React, { Component } from "react";

class Demo4 extends Component {
  constructor() {
    super();
    this.state = {
      showHideFName: true,
      showHideLName: true
    };
    this.hideComponent = this.hideComponent.bind(this);
  }

  hideComponent(name) {
    switch (name) {
      case "showHideFName":
        this.setState({ showHideFName: !this.state.showHideFName });
        break;
      case "showHideLName":
        this.setState({ showHideLName: !this.state.showHideLName });
        break;
      default:
        null;
    }
  }

  render() {
    const { showHideFName, showHideLName } = this.state;
    return (
      <div>
        <table>
          {showHideFName && (
            <tr>
              <td>First Name :</td>
              <td>
                <input type="text" id="fName" />
              </td>
            </tr>
          )}
          {showHideLName && (
            <tr>
              <td>Last Name :</td>
              <td>
                <input type="text" id="lName" />
              </td>
            </tr>
          )}
          {showHideFName && showHideLName && (
            <tr>
              <td>
                <button>Submit</button>
              </td>
            </tr>
          )}
          <tr>
            <td>
              <button onClick={() => this.hideComponent("showHideFName")}>
                Hide First Name
              </button>
            </td>
            <td>
              <button onClick={() => this.hideComponent("showHideLName")}>
                Hide Last Name
              </button>
            </td>
          </tr>
        </table>
      </div>
    );
  }
}

export default Demo4;
    

它看起来像一个巨大的文件，所以让我们讨论一下有关这个组件的所有内容。

首先，我们有两个不同的状态变量以及默认值。

render ()方法包含不同的表单控件以及提交按钮，但它被条件包围，如下所示。

      {showHideFName && (
            <tr>
              <td>First Name :</td>
              <td>
                <input type="text" id="fName" />
              </td>
            </tr>
          )}
    

仅当条件为真时，才会呈现特定的表格行；否则，它将不会在 DOM 中可见。其他表单控件也是如此，包括姓氏输入框和提交按钮控件。

最后，我们还有另外两个附加了事件的按钮，它们通过提供标识单击了哪个按钮的唯一字符串来触发操作。

一旦单击按钮，方法hideComponent()就会发挥作用。它用于根据我们从按钮控件获取的唯一标识符更新状态值。

      switch (name) {
      case "showHideFName":
        this.setState({ showHideFName: !this.state.showHideFName });
        break;
      case "showHideLName":
        this.setState({ showHideLName: !this.state.showHideLName });
        break;
      default:
        null;
    }
    

我们有两个用例。如果单击第一个按钮，我们可以隐藏名字输入控件；否则，将匹配另一种情况，并且如果任何字符串与所需值匹配，则将更新相应的状态值。

因此，根据点击事件，状态值将会更新，并且根据布尔值，特定的表行会隐藏或显示到 DOM 中。

<div class="title aem-GridColumn--tab

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何显示和隐藏 ReactJS 组件

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React, { Component } from "react"; class Demo1 extends Component { constructor() { super(); this.state = { name: "React" }; } render() { return <div>This is Demo1 component</div>; } } export default Demo1;

import React, { Component } from "react"; class Demo2 extends Component { constructor() { super(); this.state = { name: "React" }; } render() { return <div>This is Demo2 component</div>; } } export default Demo2;

import React, { Component } from "react"; class Demo3 extends Component { constructor() { super(); this.state = { name: "React" }; } render() { return <div>This is Demo3 component</div>; } } export default Demo3;

import React, { Component } from "react"; import { render } from "react-dom"; import Demo1 from "./Demo1"; import Demo2 from "./Demo2"; import Demo3 from "./Demo3"; class App extends Component { constructor() { super(); this.state = { name: "React", showHideDemo1: false, showHideDemo2: false, showHideDemo3: false }; this.hideComponent = this.hideComponent.bind(this); } hideComponent(name) { console.log(name); switch (name) { case "showHideDemo1": this.setState({ showHideDemo1: !this.state.showHideDemo1 }); break; case "showHideDemo2": this.setState({ showHideDemo2: !this.state.showHideDemo2 }); break; case "showHideDemo3": this.setState({ showHideDemo3: !this.state.showHideDemo3 }); break; default: null; } } render() { const { showHideDemo1, showHideDemo2, showHideDemo3 } = this.state; return ( <div> {showHideDemo1 && <Demo1 />} <hr /> {showHideDemo2 && <Demo2 />} <hr /> {showHideDemo3 && <Demo3 />} <hr /> <div> <button onClick={() => this.hideComponent("showHideDemo1")}> Click to hide Demo1 component </button> <button onClick={() => this.hideComponent("showHideDemo2")}> Click to hide Demo2 component </button> <button onClick={() => this.hideComponent("showHideDemo3")}> Click to hide Demo3 component </button> </div> </div> ); } } render(<App />, document.getElementById("root"));

switch (name) { case "showHideDemo1": this.setState({ showHideDemo1: !this.state.showHideDemo1 }); break; case "showHideDemo2": this.setState({ showHideDemo2: !this.state.showHideDemo2 }); break; case "showHideDemo3": this.setState({ showHideDemo3: !this.state.showHideDemo3 }); break; default: null; }

import React, { Component } from "react"; class Demo4 extends Component { constructor() { super(); this.state = { showHideFName: true, showHideLName: true }; this.hideComponent = this.hideComponent.bind(this); } hideComponent(name) { switch (name) { case "showHideFName": this.setState({ showHideFName: !this.state.showHideFName }); break; case "showHideLName": this.setState({ showHideLName: !this.state.showHideLName }); break; default: null; } } render() { const { showHideFName, showHideLName } = this.state; return ( <div> <table> {showHideFName && ( <tr> <td>First Name :</td> <td> <input type="text" id="fName" /> </td> </tr> )} {showHideLName && ( <tr> <td>Last Name :</td> <td> <input type="text" id="lName" /> </td> </tr> )} {showHideFName && showHideLName && ( <tr> <td> <button>Submit</button> </td> </tr> )} <tr> <td> <button onClick={() => this.hideComponent("showHideFName")}> Hide First Name </button> </td> <td> <button onClick={() => this.hideComponent("showHideLName")}> Hide Last Name </button> </td> </tr> </table> </div> ); } } export default Demo4;

{showHideFName && ( <tr> <td>First Name :</td> <td> <input type="text" id="fName" /> </td> </tr> )}

switch (name) { case "showHideFName": this.setState({ showHideFName: !this.state.showHideFName }); break; case "showHideLName": this.setState({ showHideLName: !this.state.showHideLName }); break; default: null; }