未使用react-router呈现引导选择元素

import React, { useState } from 'react';

function App() {
  const [selected, setSelected] = useState(null);

  const handleSelection = (choice) => {
    setSelected(choice);
  };

  return (
    <div>
      {selected === null ? (
        <div>
          <h1>请选择一个元素：</h1>
          <button onClick={() => handleSelection('元素A')}>元素A</button>
          <button onClick={() => handleSelection('元素B')}>元素B</button>
          <button onClick={() => handleSelection('元素C')}>元素C</button>
        </div>
      ) : (
        <div>
          <h1>你选择了{selected}</h1>
          {/* 根据选择显示相应的内容 */}
          {selected === '元素A' && <div>元素A的内容</div>}
          {selected === '元素B' && <div>元素B的内容</div>}
          {selected === '元素C' && <div>元素C的内容</div>}
        </div>
      )}
    </div>
  );
}

export default App;