【react】用react-reflex实现可左右拖拽调整宽度的div

1. 项目介绍

Re-Flex 是一个基于 React 的弹性布局组件库，专为需要可调整布局的高级 React Web 应用程序设计。它允许用户通过简单的组件配置实现复杂的可调整布局，适用于需要灵活界面的各种应用场景。

2. 项目快速启动

安装 首先，通过 npm 安装 Re-Flex：

npm install react-reflex

3. 基本使用

以下是一个简单的垂直布局示例，包含两个可调整大小的面板和一个分割条：

import React from 'react';
import ReactDOM from 'react-dom';
import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
import 'react-reflex/styles.css';
 
export default function Home() {
    return (
      <ReflexContainer orientation="vertical">
        <ReflexElement className="left-pane" minSize={300} flex={0.4} >
          <div className="pane-content">
            左侧面板（可调整大小）
          </div>
        </ReflexElement>
        
        <ReflexSplitter className="mx-2" />
        
        <ReflexElement flex={0.6} className="right-pane flex" minSize={200}>
          <div className="pane-content">
            右侧面板（可调整大小）
          </div>
        </ReflexElement>
      </ReflexContainer>
    );
  }