React点击按钮/开关修改iframe src主题参数并刷新实现方案

通过React状态维护当前主题值，绑定组件交互事件更新状态，状态变更时自动拼接iframe地址触发页面重载，即可实现需求。 #

补全后可直接运行的代码 #

import { useState } from 'react';

// 原有基础地址配置保留
const baseUrl = "http://localhost/ij3&theme=";

const TestPage = () => {
  // 定义主题状态，默认值和Switch初始选中状态对齐
  const [currentTheme, setCurrentTheme] = useState('dark');

  // 统一主题切换逻辑
  const handleThemeToggle = () => {
    setCurrentTheme(prev => prev === 'dark' ? 'light' : 'dark');
  };

  return (
    <Card>
      <Switch 
        defaultChecked 
        checked={currentTheme === 'dark'}
        onChange={handleThemeToggle} 
      />
      <Button
        onClick={handleThemeToggle}
        label={currentTheme === 'dark' ? 'light' : 'dark'}>
      </Button>
      <IframeResizer
        src={`${baseUrl}${currentTheme}`}
        style={{ width: '100%' }}
      />
    </Card>
  );
};

export default TestPage;

关键改动点 #

• 引入React内置的useState钩子存储当前激活的主题，保证状态和UI同步
• 封装统一的切换方法，点击Switch或Button时，在light/dark两个主题值间翻转
• Switch组件增加受控checked属性，避免开关状态和实际主题不一致的问题
• 按钮文案动态跟随当前主题变化，直观展示点击后切换的目标主题
• iframe的src属性动态拼接当前主题值，React检测到src变化时会自动刷新iframe，加载对应主题的页面内容
• 移除了原有内联样式中重复定义的width: '1px'冗余代码

如果你的页面地址第一个查询参数需要用?标识，把baseUrl末尾的&theme=改为?theme=即可，按自身业务的路由参数规则调整。

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