在ReactJs开发中，我们经常需要根据状态或事件来隐藏或显示一些组件。这篇文章将介绍几种常用的方法来实现这个功能，并提供示例代码和指导意义。
方法1：通过CSS样式控制display属性
我们可以通过设置CSS样式来控制组件的显示和隐藏。具体来说，我们可以定义一个类（例如名为“hidden”的类），并在需要隐藏该组件时，将该类添加到组件的className属性中。反之，在需要显示组件时，我们可以从className中移除该类。
------ ------ - -------- - ---- --------
------ ------------
-------- ----- -
----- ---------- ------------ - ---------------
----- ------------ - -- -- -
-----------------------
--
------ -
---- ----------------
------- -----------------------
--------- - ------ - -------
---------
---- ------------------------ ---------- - -------- - ------
---- -- -- ----------
------
------
--
-
------ ------- ----在上面的示例代码中，我们定义了一个名为“hidden”的CSS类，它将组件的display属性设置为“none”。我们使用useState来跟踪组件的隐藏状态，然后在组件的className中添加或移除“hidden”类来切换该组件的隐藏和显示状态。
这种方法的优点是简单且易于实现。缺点是，当我们需要显示或隐藏多个组件时，需要为每个组件定义一个类，并在每个组件上使用相应的类。
方法2：通过条件渲染控制组件显示
ReactJs提供了一种更直接的方法来隐藏和显示组件：条件渲染。具体来说，我们可以在组件树中添加一个逻辑检查，以决定是否呈现组件。
------ ------ - -------- - ---- --------
------ ------------
-------- ----- -
----- ---------- ------------ - ---------------
----- ------------ - -- -- -
-----------------------
--
------ -
---- ----------------
------- -----------------------
--------- - ------ - -------
---------
---------- -- ------------ ---
------
--
-
-------- ------------- -
------ --------- -- -- -----------------
-
------ ------- ----在上面的示例代码中，我们使用useState来跟踪组件的隐藏状态，然后在return语句中添加一个逻辑检查（“!isHidden”），以决定是否呈现组件。
这种方法的优点是简单且灵活。缺点是，需要在组件树中添加逻辑检查，这可能会导致一些性能问题。
方法3：通过React Hooks控制组件显示
React Hooks是ReactJs中的一种新功能，它允许我们在函数式组件中使用状态和其他React功能。我们可以使用useState Hook来创建一个显示状态，并使用useEffect Hook来更新该状态以控制组件的显示。
------ ------ - --------- --------- - ---- --------
------ ------------
-------- ----- -
----- ---------- ------------ - ---------------
----- ------------ - -- -- -
-----------------------
--
------------ -- -
-------------- - ---------- -------------
-- ------------
------ -
---- ----------------
------- -----------------------
--------- - ------ - -------
---------
--------- - ---- - ------------ ---
------
--
-
-------- ------------- -
------ --------- -- -- -----------------
-
------ ------- ----在上面的示例代码中，我们使用useState来跟踪组件的隐藏状态，并使用useEffect来更新文档标题以反映该状态。在return语句中
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/12676