如何通过选择选项更改反应组件？

【问题标题】：How to change react component through select option?如何通过选择选项更改反应组件？
【发布时间】：2021-07-24 18:55:41
【问题描述】：

如何根据下拉值更改组件？没有路由器可以吗？ https://codesandbox.io/s/dreamy-cherry-2qcwx?file=/src/App.js 通过选择下拉菜单更改状态时，我需要切换标题， , .请帮忙，提前谢谢

    <div className="container">
    <header>
    <HeadertypeA />
    <HeadertypeB />
    <HeadertypeC />
    </header>
    <section>Page Body</section>
    <footer>footer </footer>
    </div>

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

您可以将选择值映射到组件的对象：

const headerTypeObject = {
  "a": HeaderTypeA,
  "b": HeaderTypeB,
  "c": HeaderTypeC
}

您还需要一个状态变量来跟踪：

const [currentHeaderType, setCurrrentHeaderType] = React.useState("a");

然后就可以渲染了：

<div>
<select value = {currentHeaderType} onChange = {e => setCurrentHeaderType(e.target.value)}>
  {Object.keys(headerTypeObject).map((type, i) => (
    <option key = {i} value = {type}> {type} </option>
  ))}
</select>
{headerTypeObject[currentHeaderType]() /* This is the header component we will render*/}
</div>

【讨论】：