在react中动态切换类？

import React from 'react';

function MyClass() {
  const isActivated = true;

  return (
    <div className={isActivated ? 'active' : 'inactive'}>
      My Class
    </div>
  );
}

export default MyClass;

import React, { useState } from 'react';

function MyClass() {
  const [className, setClassName] = useState('active');

  const toggleClass = () => {
    if (className === 'active') {
      setClassName('inactive');
    } else {
      setClassName('active');
    }
  };

  return (
    <div className={className}>
      <button onClick={toggleClass}>Toggle Class</button>
    </div>
  );
}

export default MyClass;