如何解决尝试在React中制作可调整大小的列时遇到问题
我试图在react中创建可调整大小的列,但我做得很好,仅使用几个列就可以使它工作,但是当我尝试嵌套它们时,事情开始无法正常工作,例如当我拖动时调整其大小的列将无法正常工作,例如,如果我的移动速度不是很慢,它将停止监听鼠标的移动,而在未嵌套的列中不会发生。听起来听起来有些奇怪,但是如果您看到代码,它将变得更加清晰。我不明白问题所在:(
列文件
import React,{ useState,useEffect } from 'react';
function Columns( props ) {
const [ isResizing,setIsResizing ] = useState( false );
const [ target,setTarget ] = useState();
const [ parentClientRect,setParentClientRect ] = useState();
const [ columnsPercentages,setColumnsPercentages ] = useState([{}]);
const count = props.children.length;
const minWidth = 5;
useEffect(()=>{
const initialColumnPercentage = 100 / count;
const initialColumnsPercentageArray = [];
for( let i = 0; i < count; i++ ){
initialColumnsPercentageArray.push( initialColumnPercentage );
}
setColumnsPercentages([...initialColumnsPercentageArray]);
},[]);// eslint-disable-line react-hooks/exhaustive-deps
const handleMouseMove = ( e ) =>{
if ( !isResizing ) return;
console.log( target );
let newPerc = ((( e.pageX - parentClientRect.x ) * 100 ) / parentClientRect.width ) + 1;
if ( target !== 0 ){
let percentageToSubtract = 0;
for( let i = 0; i < target; i++ ){
percentageToSubtract = percentageToSubtract + columnsPercentages[i];
}
newPerc = newPerc - percentageToSubtract;
}
if ( newPerc > 100 - ( count - 1 ) * minWidth ){
newPerc = 100 - ( count - 1 ) * minWidth;
}
let newPercentagesArray = columnsPercentages;
newPercentagesArray.splice( target,1,newPerc );
let totalPercentage = newPercentagesArray.reduce(( a,b ) => a + b );
if ( totalPercentage !== 100 ){
let nextColumnPerc = 100 - newPercentagesArray[target] - ( totalPercentage - ( newPercentagesArray[target] + newPercentagesArray[target + 1]));
if ( nextColumnPerc < minWidth ){
nextColumnPerc = minWidth;
}
newPercentagesArray.splice( target + 1,nextColumnPerc );
}
setColumnsPercentages([...newPercentagesArray]);
};
const handleMouseUp = ( e ) =>{
setIsResizing( false );
setTarget( null );
setParentClientRect( null );
};
const handleMouseDown = ( e,key ) =>{
e.stopPropagation();
setTarget( key );
setParentClientRect( e.target.parentElement.getBoundingClientRect());
setIsResizing( true );
};
return (
<main className="columns" onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} >
{
React.Children.map( props.children,(( x,index )=> React.cloneElement( x,{
key: index,onMouseDown: ( e ) => handleMouseDown( e,index ),initialWidth: 100 / count,maxWidth: 100 - ( count - 1 ) * minWidth,columnsPercentages,index
})))
}
</main>
);
}
export default Columns;
列文件
import React,useEffect } from 'react';
function Column( props ) {
const { index,className = '',maxWidth,minWidth = '5%',initialWidth,onMouseDown } = props;
const [ width,setWidth ] = useState( initialWidth );
useEffect(()=>{
console.log( columnsPercentages );
if ( columnsPercentages[index] != null ){
if ( columnsPercentages[index] !== width ){
setWidth( columnsPercentages[index]);
}
}
},[columnsPercentages]);// eslint-disable-line react-hooks/exhaustive-deps
return (
<section className={`column ${className}`} style={{ maxWidth:`${maxWidth}%`,minWidth,width:`${width}%` }}
onMouseDown={onMouseDown} >
{props.children}
</section>
);
}
export default Column;
实施
import React,{ useState } from 'react';
import Columns from '../common/Columns.jsx';
import Column from '../common/Column.jsx';
function ImplementationColumns( props ){
return (
<>
<Columns>
<Column>
<p style={{ textAlign: 'center',lineHeight: '100px' }}>section 1</p>
<Columns>
<Column>
<p style={{ textAlign: 'center',lineHeight: '100px' }}>nested 1</p>
</Column>
<Column>
<p style={{ textAlign: 'center',lineHeight: '100px' }}>nested 2</p>
</Column>
<Column>
<p style={{ textAlign: 'center',lineHeight: '100px' }}>nested 3</p>
</Column>
</Columns>
</Column>
<Column>
<p style={{ textAlign: 'center',lineHeight: '100px' }}>section 2</p>
</Column>
</Columns>
</>
);
}
export default ImplementationColumns;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。