const MyComponent = ({ isActive }) => (
  <div>
    {isActive ? <p>Active</p> : <p>Inactive</p>}
  </div>
);

const MyComponent = ({ isActive }) => (
  <div>
    {isActive && <p>Active</p>}
    {!isActive && <p>Inactive</p>}
  </div>
);

const renderStatus = (isActive) => {
  if (isActive) {
    return <p>Active</p>;
  } else {
    return <p>Inactive</p>;
  }
};

const MyComponent = ({ isActive }) => (
  <div>
    {renderStatus(isActive)}
  </div>
);

const ActiveStatus = () => <p>Active</p>;
const InactiveStatus = () => <p>Inactive</p>;

const MyComponent = ({ isActive }) => (
  <div>
    {isActive ? <ActiveStatus /> : <InactiveStatus />}
  </div>
);

// 使用自定义Hooks的例子
import { useState } from 'react';

const useStatus = (initialStatus) => {
  const [status, setStatus] = useState(initialStatus);
  return [status, setStatus];
};

const MyComponent = () => {
  const [isActive, setIsActive] = useStatus(true);

  return (
    <div>
      {isActive ? <p>Active</p> : <p>Inactive</p>}
      <button onClick={() => setIsActive(!isActive)}>Toggle Status</button>
    </div>
  );
};