React中如何点击按钮交换两个Select组件的位置？

我有左右两个Select组件，右侧为SelectComponentA，左侧为SelectComponentB，二者选项内容不同。需求是点击按钮时，将SelectComponentA切换到左侧，SelectComponentB切换到右侧，请问在React中如何实现该功能？

我写的两个组件代码如下：

function SelectComponentA({
<select name="Country" id="Country">
  <option value="France">France</option>
  <option value="Italy">Italy</option>
)}
export SelectComponentA


function SelectComponentB({
<select name="Segment" id="Segment">
  <option value="Segment 1">Segment 1</option>
  <option value="Segment 2">Segment 2</option>
</select>

export SelectComponentB

我尝试用useState实现，但没成功，代码如下：

const [dropDownSwap, setSwap] = useState(true)

function swapDropDownComponents() {
    setSwap(!dropDownSwap)
  }

 {dropDownSwap ? SelectComponentA : SelectComponentB}

<button type="button" Onclick={SwapSelectComponent}>Swap</button>

首先要修正你组件代码里的语法错误，React函数组件需要正确的return语句和export语法：

// 修正后的SelectComponentA
export function SelectComponentA() {
  return (
    <select name="Country" id="Country">
      <option value="France">France</option>
      <option value="Italy">Italy</option>
    </select>
  );
}

// 修正后的SelectComponentB
export function SelectComponentB() {
  return (
    <select name="Segment" id="Segment">
      <option value="Segment 1">Segment 1</option>
      <option value="Segment 2">Segment 2</option>
    </select>
  );
}

你的切换思路是对的，但存在几个细节错误，修正后即可实现左右切换效果：

1. 组件渲染必须用<Component />的形式，不能直接写组件名
2. 按钮的点击属性是小驼峰的onClick，不是Onclick
3. 按钮点击事件要对应定义好的swapDropDownComponents函数，不能写错名称
4. 需要用状态同时控制左右两个位置的组件，而非只控制单个位置

完整实现代码如下：

import { useState } from 'react';
import { SelectComponentA, SelectComponentB } from './path-to-your-components'; // 替换成你的组件实际路径

function App() {
  const [isSwapped, setIsSwapped] = useState(false);

  const handleSwap = () => {
    setIsSwapped(!isSwapped);
  };

  return (
    <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
      {/* 左侧位置：根据状态渲染对应组件 */}
      {isSwapped ? <SelectComponentA /> : <SelectComponentB />}
      <button type="button" onClick={handleSwap}>切换位置</button>
      {/* 右侧位置：根据状态渲染对应组件 */}
      {isSwapped ? <SelectComponentB /> : <SelectComponentA />}
    </div>
  );
}

export default App;

逻辑说明 #

• 用isSwapped布尔状态标记是否切换：
  • 初始状态isSwapped为false，左侧显示SelectComponentB，右侧显示SelectComponentA，符合初始布局
  • 点击按钮触发handleSwap，状态取反，左侧显示SelectComponentA，右侧显示SelectComponentB，完成位置切换
• 用flex布局让组件和按钮横向排列，模拟左右位置的展示效果

内容的提问来源于stack exchange，提问作者S Dhanissh