单击父组件时，角度显示子组件

import React, { useState } from 'react';
import './ParentComponent.css'; // 引入样式文件
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [isVisible, setIsVisible] = useState(false);

  const handleClick = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div className="parent" onClick={handleClick}>
      Click me!
      {isVisible && <ChildComponent />}
    </div>
  );
}

export default ParentComponent;

import React from 'react';
import './ChildComponent.css'; // 引入样式文件

function ChildComponent() {
  return <div className="child">I am the child component!</div>;
}

export default ChildComponent;

/* ParentComponent.css */
.parent {
  padding: 20px;
  border: 1px solid #ccc;
  cursor: pointer;
}

/* ChildComponent.css */
.child {
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s;
  transform: rotateY(90deg);
}

.parent.active .child {
  opacity: 1;
  transform: rotateY(0deg);
}