如何在点击时隐藏另一个div？在react js中一次只能显示一个div

在React.js中，可以使用条件渲染来实现在点击时隐藏另一个div并一次只显示一个div的效果。具体步骤如下：

1. 创建一个React组件，包含两个div，即要显示和隐藏的div。
2. 在组件的state中添加一个布尔类型的变量，用于控制两个div的显示与隐藏。例如，命名为isDivVisible，初始值为true。
3. 在要隐藏的div上添加一个事件处理函数，例如onClick事件。在事件处理函数中，调用setState方法更新isDivVisible的值为false。
4. 在要显示的div上添加一个事件处理函数，也是onClick事件。在事件处理函数中，调用setState方法更新isDivVisible的值为true。
5. 使用条件渲染，根据isDivVisible的值来决定渲染哪一个div。例如，使用{isDivVisible ? <要显示的div /> : <要隐藏的div />}的形式来渲染div。

下面是一个示例代码：

import React, { useState } from "react";

const MyComponent = () => {
  const [isDivVisible, setDivVisible] = useState(true);

  const hideDiv = () => {
    setDivVisible(false);
  };

  const showDiv = () => {
    setDivVisible(true);
  };

  return (
    <div>
      {isDivVisible ? (
        <div onClick={hideDiv}>要显示的div</div>
      ) : (
        <div onClick={showDiv}>要隐藏的div</div>
      )}
    </div>
  );
};

export default MyComponent;

在上述代码中，根据isDivVisible的值来决定渲染要显示的div还是要隐藏的div。点击要隐藏的div时，调用hideDiv函数将isDivVisible的值更新为false，从而渲染要显示的div；点击要显示的div时，调用showDiv函数将isDivVisible的值更新为true，从而渲染要隐藏的div。这样就实现了在点击时隐藏另一个div，并且一次只显示一个div的效果。

腾讯云相关产品和产品介绍链接地址请参考腾讯云官方网站。