为React中唯一的一个元素添加类

import React from 'react';

function MyComponent() {
  return (
    <div className="static-class">
      This element has a static class.
    </div>
  );
}

export default MyComponent;

import React, { useState } from 'react';

function ToggleClassComponent() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      className={`base-class ${isActive ? 'active-class' : 'inactive-class'}`}
      onClick={() => setIsActive(!isActive)}
    >
      Click me to toggle class!
    </div>
  );
}

export default ToggleClassComponent;

import styles from './MyComponent.module.css';

function MyComponent() {
  return (
    <div className={styles.uniqueClass}>
      This element has a unique class.
    </div>
  );
}

export default MyComponent;

import React, { useState, useEffect } from 'react';

function ConditionalClassComponent({ shouldAddClass }) {
  const [hasClass, setHasClass] = useState(false);

  useEffect(() => {
    setHasClass(shouldAddClass);
  }, [shouldAddClass]);

  return (
    <div className={`base-class ${hasClass ? 'additional-class' : ''}`}>
      This element may have an additional class based on props.
    </div>
  );
}

export default ConditionalClassComponent;