如何呈现元素取决于react中的选择值

import React from 'react';

function App() {
  const choice = 'option1'; // 假设选择值为'option1'

  return (
    <div>
      {choice === 'option1' && <Element1 />} {/* 如果选择值为'option1'，渲染Element1组件 */}
      {choice === 'option2' && <Element2 />} {/* 如果选择值为'option2'，渲染Element2组件 */}
      {choice === 'option3' ? <Element3 /> : <Element4 />} {/* 如果选择值为'option3'，渲染Element3组件，否则渲染Element4组件 */}
    </div>
  );
}

function Element1() {
  return <h1>Element 1</h1>;
}

function Element2() {
  return <h1>Element 2</h1>;
}

function Element3() {
  return <h1>Element 3</h1>;
}

function Element4() {
  return <h1>Element 4</h1>;
}

export default App;