假设您有两个列表：第一个列表用于呈现最高级别的选择输入。一旦从第一级输入中选择了一个项目，您就可以尝试在第二个列表中找到所选的项目，该列表实际上是对象的形式，即为了简单起见，这里的键值对。每把钥匙我都有一个子清单。因此，我们可以为从顶级列表中选择的每个项目呈现不同的子列表。
我想知道如何根据之前使用React和组件函数而非类的select的所选选项来更改select的选项。例如，当我选择一个类别时，它必须根据属于该类别的项目选项显示在select中。我很难找到解决方案，我在youtube和谷歌上搜索了好几次，但都没有结果。如果你知道如何编码这个部分，请帮我。
通过这种方式，您可以拥有任意多个级别。您甚至可以为此目的使用递归，并以树的形式提供所有选项。
const App = () => {
const continents = ["", "Africa", "Europe"];
const countries = {
Africa: ["Egypt", "Kenya", "South Africa"],
Europe: ["United Kingdom", "Germany", "France"]
};
const [selectedContinent, setSelectedContinent] = React.useState();
const [selectedCountry, setSelectedCountry] = React.useState();
return (
<div>
<select onChange={(e) => setSelectedContinent(e.target.value)}>
{continents.map(continent => (
<option key={continent}>{continent}</option>
))}
</select>
{countries[selectedContinent] &&
countries[selectedContinent].length > 0 && (
<select onChange={(e) => setSelectedCountry(e.target.value)}>
{countries[selectedContinent].map(country => (
<option key={country}>{country}</option>
))}
</select>
)}
</div>
)
}
ReactDOM
.createRoot(document.getElementById("root"))
.render(<App />);<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>