1.路由跳转及传参
import { withRouter, RouteComponentProps } from 'react-router';
class ReplenishmentOrder extends Component<
TProps & RouteComponentProps,
TState
> {
constructor(props: RouteComponentProps) {
super(props);
this.state = {};
}
handelInfo() {
console.log(this);
this.props.history.push({
pathname: '/bill/replenishment-order/info',
state: { isInfo: true },
});
}
render() {
return (
<StyledDiv>
<Table
rowKey={'id'}
columns={this.columns}
fetcher={undefined}
params={this.params}
headerBtns={
<Button onClick={this.handelInfo.bind(this)}>
详情
</Button>
}
></Table>
</StyledDiv>
);
}
}
export default withRouter(ReplenishmentOrder);
//获取
this.props.location.state, '参数----'
2.元素添加可拖动缩放功能
https://blog.csdn.net/Cs_Mervyn/article/details/123682347
https://blog.csdn.net/xidianyueyong/article/details/81357139
css
.react-resizable {
position: relative;
}
.react-resizable-handle {
/* position: absolute;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-origin: content-box;
box-sizing: border-box;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
background-position: bottom right;
padding: 0 3px 3px 0; */
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
}
.react-resizable-handle-sw {
bottom: 0;
left: 0;
cursor: sw-resize;
transform: rotate(90deg);
}
.react-resizable-handle-se {
bottom: 0;
right: 0;
cursor: se-resize;
}
.react-resizable-handle-nw {
top: 0;
left: 0;
cursor: nw-resize;
transform: rotate(180deg);
}
.react-resizable-handle-ne {
top: 0;
right: 0;
cursor: ne-resize;
transform: rotate(270deg);
}
.react-resizable-handle-w,
.react-resizable-handle-e {
/* top: 50%; */
/* margin-top: -10px; */
cursor: ew-resize;
}
.react-resizable-handle-w {
left: 0;
transform: rotate(135deg);
}
.react-resizable-handle-e {
/* right: 0; */
right: -5px;
/* transform: rotate(315deg); */
}
.react-resizable-handle-n,
.react-resizable-handle-s {
left: 50%;
margin-left: -10px;
cursor: ns-resize;
}
.react-resizable-handle-n {
top: 0;
transform: rotate(225deg);
}
.react-resizable-handle-s {
bottom: 0;
transform: rotate(45deg);
}
组件封装
import { Component } from 'react';
import { Resizable } from 'react-resizable';
import styled from 'styled-components';
type TProps = {
axis?: string; // 改变轴
width?: number; //宽度 0 为不限制
height?: number; //高度 0 为不限制
resizeHandles?: string; // 拖动方向 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'; // 拖拽句柄的类型,对应单词 south | west | east | north 首字母
minConstraints?: number[]; //最小尺寸 值为0时默认100%
maxConstraints?: number[]; //最大尺寸 值为0时默认100%
};
type TState = {
axis: string;
width: number;
height: number;
};
const ResizeStyle = styled.div`
flex-shrink: 0;
.react-resizable {
width: 100% !important;
height: 100% !important;
padding-top: 24px;
flex-shrink: 0 !important;
}
`;
export default class ResizableBox extends Component<TProps, TState> {
constructor(props: TProps) {
super(props);
this.state = {
axis: this.props.axis || 'x',
width: this.props.width || 0,
height: this.props.height || 0,
};
}
onResize = (event, { node, size, handle }) => {
console.log(size);
this.setState({ width: size.width, height: size.height });
};
render() {
return (
<ResizeStyle
style={{
width: this.state.width || '100%',
height: this.state.height || '100%',
}}
>
<Resizable
width={this.state.width}
height={this.state.height}
axis={this.props.axis}
resizeHandles={[this.props.resizeHandles]}
minConstraints={this.props.minConstraints || [100, 100]}
maxConstraints={this.props.maxConstraints || [1000, 1000]}
onResize={this.onResize}
>
{this.props.children}
</Resizable>
</ResizeStyle>
);
}
}
使用
<ResizableBox
axis='x'
width={160}
resizeHandles='e'
minConstraints={[120, 0]}
>
<div className='left-menu'>
<LeftMenu
change={this.menuChange.bind(this)}
active={this.state.menuActive}
data={this.state.menuData}
></LeftMenu>
</div>
</ResizableBox>
标签:handle,resizable,height,react,width,props,小记 From: https://www.cnblogs.com/sclweb/p/17640411.html