新接了个需求，要求可以拖拽表格的borer进行列宽调整。看到这个需求，感觉so easy, 印象中所有的UI组件库都支持这个功能，然后去看antd文档，懵逼了。。。。 4.0版本找不到这种功能支持，然后面向百度了一波，发现这种功能在antd 3.x版本里面,直接上链接。大家不要看到链接直接点走了哈，不行就先滑倒最下面，把注意事项看一下，然后再去看链接

antd 文档传送门 表格 Table - Ant Design

东西大差不差，4.x版本的antd也支持。个人实现代码如下，为了方便，TS方面避免了严格校验，由于用的地方较多，直接做了一个封装，封装如下

首先要下载依赖  npm install react-resizable --save ，然后重启项目。

import React, { PureComponent } from 'react';
import { Table } from 'antd';
import { Resizable } from 'react-resizable';
const ResizeableTitle = (props: { [x: string]: any; onResize: any; width: any; }) => {
  const { onResize, width, ...restProps } = props;
  if (!width) {
    return <th {...restProps} />
  return (
    <Resizable width={width} height={0} onResize={onResize} draggableOpts={{ enableUserSelectHack: false }}>
      <th {...restProps} />
    </ Resizable >
class TableResize extends PureComponent<any, any> {
  constructor(props: any) {
    super(props);
  state = {
    columns: this.props.columns
  components = {
    header: {
      cell: ResizeableTitle,
  handleResize = (index: number) => (e: any, { size }: any) => {
    this.setState(({ columns }: any) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      return { columns: nextColumns };
  render() {
    const columns = this.state.columns.map((col: any, index: number) => ({
      ...col,
      onHeaderCell: (column: { width: any; }) => ({
        width: column.width,
        onResize: this.handleResize(index),
    return <Table
      components={this.components}
      columns={columns}
      rowKey="id"
      border                                  // 不要这个属性也有拖拽表示
      pagination={false}
      rowSelection={this.props.rowSelection}  // 选中行的事件，不需要可删除
      dataSource={this.props.dataSource}      
      onChange={(pagination: any, filters: any) => this.props.handleTableChange(pagination, filters)} /> //表格筛选功能触发的事件，不需要可删除
export default TableResize

使用地方如下

首先引入组件

import TableReszie from '@components/TableResize'

        <TableReszie
          dataSource={dataSource}
          columns={columns}
          loading={loading}
          handleTableChange={handleTableChange}
注意点：1.传入的columns一定要每列都要设置列宽，设置列宽属性 width:number,不然对应列的后面不会出现拖拽标识，或者出现了，但是不可拖拽
 
              2. 封装的组件内部的Table组件一定要传 rowKey="id"，不然报错。pagination={false} 禁止自带分页器。
 
             3.一定要把文档的css粘贴到全局样式里，样式文档内有，代码如下。
 
            4.一定要针对表头文字进行禁止用户选择，不然用户按住鼠标左键从文字滑动的时候，选中了文字，然后再去拖拽，会发现松了鼠标后，依然可以进行拖拽，所以禁止用户选中表头文字很重
 
CSS 全局样式如下
 
// 表格拖拽样式
.react-resizable {
	position: relative;
	background-clip: padding-box;
.react-resizable-handle {
	position: absolute;
	width: 10px;
	height: 100%;
	bottom: 0;
	right: -5px;
	cursor: col-resize;
	z-index: 1;
//  禁止用户选中表头文字。
		user-select: none; /* Chrome and Opera */
		-webkit-user-select: none; /* Safari */
		-khtml-user-select: none; /* Konqueror HTML */
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
吐槽点：如果colums 内传的render jsx太复杂了话，稍微有点卡顿。所以渲染数据不要有太过复杂的处理哦
                    新接了个需求，要求可以拖拽表格的borer进行列宽调整。看到这个需求，感觉so easy, 印象中所有的UI组件库都支持这个功能，然后去看antd文档，懵逼了。。。。 4.0版本找不到这种功能支持，然后面向百度了一波，发现这种功能在antd 3.x版本里面,直接上链接。antd 文档传送门https://3x.ant.design/components/table-cn/#components-table-demo-drag-sorting东西大差不差，4.x版本的antd也支持。个人实现代码如下.
一个简单的小部件，可以通过一个或多个手柄调整大小。
 您可以直接使用<Resizable>元素，也可以使用简单得多的<ResizableBox>元素。
 有关更多详细信息，请参见和的示例以及相关代码。
 确保使用的关联样式，因为没有它们，您将在句柄放置和可见性方面遇到问题。
 您可以使用prop draggableOpts将选项直接传递给基础的DraggableCore实例。 有关更多信息，请参见。
 $ npm install --save react-resizable
const Resizable = require ( 'react-resizable' ) . Resizable ; // or,
const ResizableBox = require ( 'react-resizable' ) . ResizableBox ;
// ES
import * as React from "react";
import { Table } from "antd";
import "antd/dist/antd.css"; 
import { Resizable } from "react-.
				
源于布局需求，要求Antd的Layout组件中，侧边栏Sider可以拖拽改变宽度……
开源插件，基于react-draggable插件（同一作者），详见《react-resizable》；
    // 拖拽回调参数 size:{width,height}
    type ResizeCallbackData = {
        node: HTMLElement,
        size: {width: number, height: number},
        handle: Res.
查找了下Ant Design中的Table组件，没有发现表格header列头可以拖拽实现宽度变化的功能，领导要想要这种效果，看了下当前的WEB的 第三方UI，可能只有Material-UI支持
import { DataGridPro, GridToolbar } from '@mui/x-data-grid-pro';
但是Material-UI中的 DataGridPro在包'@mui/x-data-g...
npm install --save react-resizable 安装到当前项目中
	安装过后可先执行一下 npm install 有可能会出现'react-scripts' 不是内部或外部命令，也不是可运行的程序或批处理文件。
	在app.js中引用
import { Resizable, ResizableBox } from 'react-resizable';
 在r...
				
import { Table } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { Resizable } from 'react-resizable';
import './style.css';
const ResizeableTitle = (props: any) => {
  const { onResize, width, ...restProps } = props;
npm install --save react-resizable-rotatable-draggable
 然后，您将需要安装对等依赖性
npm install --save styled-components
import React , { Component } from 'react'
import ResizableRect from 'react-resizable-rotatable-draggable'
class App extends Component {
  constructor ( ) {
    super ( )
    this . state = {
      width : 100 ,
      height : 100 ,
				
React Native WebRTC 是一个用于实现 WebRTC 技术在 React Native 应用程序中的实时音视频通信的开源库。如果您需要调整 React Native WebRTC 中的帧率，可以通过修改 PeerConnection 的配置来实现。
在 React Native WebRTC 中，可以通过 PeerConnection 的 setConfiguration() 方法来设置帧率。例如，以下代码可以将帧率设置为 15fps：
```javascript
const configuration = {
  iceServers: [
      urls: 'stun:stun.l.google.com:19302',
  iceCandidatePoolSize: 10,
  iceTransportPolicy: 'all',
  sdpSemantics: 'unified-plan',
  video: {
    frameRate: 15,
const pc = new RTCPeerConnection(configuration);
在上面的代码中，我们将帧率设置为了 15fps，可以根据自己的需求进行调整。设置 PeerConnection 的配置后，再将其传递给 createOffer() 或 createAnswer() 方法即可。
需要注意的是，调整帧率可能会影响视频质量和性能。过高的帧率会导致带宽占用增加，过低的帧率则会导致视频质量下降。因此，在调整帧率时需要权衡视频质量和性能的影响。
                    weixin_57809160: 
                    流程图除 react、react-dom 外，还依赖 antd、@ant-design/icons、lodash，使用时确保已经安装，同时记得引入样式文件 import "@ant-design/flowchart/dist/index.css";
文档里的这个地方是什么意思那 怎么引用那
                element table 行高列宽拖拽调整
                    荒野大喵喵: 
                    如果是过宽的列表，本身有左右方向的滚动条，这个时候再拖拽就会严重影响性能吧