基于父级属性的样式组件中的条件渲染

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [isSpecial, setIsSpecial] = useState(false);

  const handleToggle = () => {
    setIsSpecial(!isSpecial);
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle Special</button>
      <ChildComponent isSpecial={isSpecial} />
    </div>
  );
};

export default ParentComponent;

// 子组件
import React from 'react';

const ChildComponent = ({ isSpecial }) => {
  return (
    <div className={isSpecial ? 'special' : 'normal'}>
      {isSpecial ? 'Special Content' : 'Normal Content'}
    </div>
  );
};

export default ChildComponent;