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