如何根据 React 中选择的选项显示组件？

Question

根据选择的选项，我有 5 个不同的组件将显示在页面上。选择器应始终保留在页面顶部。我应该如何处理这个？我对 React 很陌生，所以如果你提供尽可能多的代码，那就太好了。非常感谢！ :')

Answer 1

给你一个简单的例子：

function Main() {
  const [option, setOption] = useState("1");

  return (
    <div>
      <select onChange={(e) => setOption(e.target.value)}>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
      </select>
      <div className="component-container">
        {option === 1 && <ComponentOne />}
        {option === 2 && <ComponentTwo />}
        {option === 3 && <ComponentThree />}
        {option === 4 && <ComponentFour />}
        {option === 5 && <ComponentFive />}
      </div>
    </div>
  )
}