如何在React JS中点击按钮加载不同的内容(与已经加载的内容不同的内容)

import React, { useState } from 'react';

const ContentSwitcher = () => {
  const [content, setContent] = useState(''); // 初始内容为空字符串

  const handleButtonClick = () => {
    // 根据当前内容进行切换
    if (content === 'Content A') {
      setContent('Content B');
    } else {
      setContent('Content A');
    }
  };

  return (
    <div>
      <button onClick={handleButtonClick}>切换内容</button>
      <div>{content}</div>
    </div>
  );
};

export default ContentSwitcher;

import React from 'react';
import ContentSwitcher from './ContentSwitcher';

const App = () => {
  return (
    <div>
      <h1>React按钮切换内容示例</h1>
      <ContentSwitcher />
    </div>
  );
};

export default App;