如何在React中点击显示一个组件？

在React中，要实现点击显示一个组件，可以通过以下步骤：

1. 首先，创建一个React组件，可以是函数组件或类组件，用于显示需要点击显示的内容。例如，我们创建一个名为"DisplayComponent"的组件。
2. 在父组件中，创建一个状态变量来控制是否显示"DisplayComponent"组件。可以使用useState钩子函数或类组件的state来实现。例如，我们创建一个名为"isDisplay"的状态变量，并将其初始值设置为false。
3. 在父组件中，创建一个点击事件处理函数，用于在点击时更新"isDisplay"状态变量的值。例如，我们创建一个名为"handleClick"的点击事件处理函数，并在其中使用setState或useState的更新函数来将"isDisplay"的值设置为true。
4. 在父组件的render方法中，使用条件渲染来决定是否显示"DisplayComponent"组件。可以使用if语句、三元表达式或逻辑与运算符来实现。例如，我们可以使用逻辑与运算符&&来判断"isDisplay"的值，如果为true，则渲染"DisplayComponent"组件。

下面是一个示例代码：

import React, { useState } from 'react';

function DisplayComponent() {
  return (
    <div>
      {/* 显示的内容 */}
    </div>
  );
}

function ParentComponent() {
  const [isDisplay, setIsDisplay] = useState(false);

  const handleClick = () => {
    setIsDisplay(true);
  };

  return (
    <div>
      <button onClick={handleClick}>点击显示组件</button>
      {isDisplay && <DisplayComponent />}
    </div>
  );
}

export default ParentComponent;

在上述示例中，当点击"点击显示组件"按钮时，会调用"handleClick"函数，将"isDisplay"状态变量的值设置为true。然后，根据"isDisplay"的值来决定是否渲染"DisplayComponent"组件。

这样，当用户点击按钮时，"DisplayComponent"组件就会显示出来。