在ReactJS中打开两个具有相同功能的下拉列表

，可以通过创建一个可复用的组件来实现。下面是一个示例代码：

import React, { useState } from 'react';

const Dropdown = () => {
  const [selectedOption, setSelectedOption] = useState('');
  const options = ['Option 1', 'Option 2', 'Option 3'];

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <select value={selectedOption} onChange={handleOptionChange}>
      <option value="">Select an option</option>
      {options.map((option) => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </select>
  );
};

const App = () => {
  return (
    <div>
      <h1>Dropdown 1</h1>
      <Dropdown />
      <h1>Dropdown 2</h1>
      <Dropdown />
    </div>
  );
};

export default App;

在上面的代码中，我们创建了一个名为Dropdown的组件，它包含一个下拉列表和一个状态selectedOption来跟踪当前选择的选项。options数组包含下拉列表中的选项。

当用户选择一个选项时，handleOptionChange函数会更新selectedOption的值。通过将selectedOption作为value属性传递给select元素，可以确保下拉列表显示当前选择的选项。

在App组件中，我们使用两个Dropdown组件来展示具有相同功能的下拉列表。你可以根据需要自定义选项的内容和数量。

这个组件可以在各种场景中使用，例如表单中的选择器、筛选器等。腾讯云提供了云计算相关的产品，例如云服务器、云数据库、云存储等，你可以根据具体需求选择适合的产品。以下是腾讯云相关产品的介绍链接：