React中如何根据窗口宽度调整JqxSplitter面板大小？

直接通过React状态管理结合窗口resize事件监听实现动态调整，以下是修改后的完整代码：

import React, { useEffect, useRef, useState } from 'react';
import * as ISO from 'src/framework/layout/LayerComponents';
import ISOInput from 'src/framework/components/controls/ISOInput';
import ISOGrid from 'src/framework/components/controls/ISOGrid';
import ISOAxios, { DataPackage } from 'src/framework/core/apis/ISOAxios';
import ISORoleButton, { ButtonType } from 'src/framework/components/controls/ISORoleButton';
import { alertType, e3 } from 'src/framework/core/utils/utils';
import ISONotification from 'src/framework/components/controls/ISONotification';
import { useDispatch, useSelector } from 'react-redux';
import { addTab } from 'src/framework/core/reducers/TabReducer';
import ISOButton from 'src/framework/components/controls/ISOButton';
import JqxSplitter from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
import axios from 'axios';
import {
  ISODialog,
  ISODialogTitle,
  ISODialogContent,
  ISODialogActions,
} from 'src/framework/components/controls/ISODialog';
import { nextTab, prevTab, removeTab, removeAll } from 'src/framework/core/reducers/TabReducer'; 

const LEGO203 = () => {
  const [leftSize, setLeftSize] = useState<string>('30%');
  const [rightSize, setRightSize] = useState<string>('70%');
  const dispatch = useDispatch();

  // 原组件搜索方法（保留原有逻辑）
  const onSearch = () => {
    // 此处为原有搜索逻辑
  };

  // 根据窗口宽度计算面板尺寸
  const calculatePanelSizes = () => {
    const windowWidth = window.innerWidth;
    // 可自定义断点和比例，示例为响应式断点设置
    if (windowWidth < 768) {
      setLeftSize('25%');
      setRightSize('75%');
    } else if (windowWidth < 1200) {
      setLeftSize('30%');
      setRightSize('70%');
    } else {
      setLeftSize('35%');
      setRightSize('65%');
    }
  };

  useEffect(() => {
    // 初始化时计算一次尺寸
    calculatePanelSizes();
    // 监听窗口resize事件
    window.addEventListener('resize', calculatePanelSizes);
    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      window.removeEventListener('resize', calculatePanelSizes);
    };
  }, []);

  useEffect(() => {
    onSearch();
  }, []);

  return (
    <JqxSplitter
      width="100%"
      height="100%"
      panels={[{ size: leftSize }, { size: rightSize }]}
      orientation={'vertical'}
    >
      {/* 左面板内容容器 */}
      <div>左面板内容</div>
      {/* 右面板内容容器 */}
      <div>右面板内容</div>
    </JqxSplitter>
  );
};

export default LEGO203;

关键修改说明： #

• 新增useState管理leftSize和rightSize状态，确保尺寸变化时组件自动重渲染。
• 编写calculatePanelSizes函数，根据窗口宽度动态计算面板比例，支持自定义断点和尺寸规则（百分比/固定像素值均可）。
• 通过useEffect注册窗口resize事件监听，初始化时执行一次尺寸计算，组件卸载时移除监听。
• 修正原代码panels属性语法错误：将{ size: {leftSize} }改为{ size: leftSize }，原写法会将size设为对象，不符合JqxSplitter参数要求。

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