Я использую библиотеку реагировать на изменения размеров блоков. Я создал страницу. Он создает серый контейнер на нем, и я нажимаю кнопку «Добавить глобальный контейнер», и в поле появляется контейнер, который я могу перемещать и изменять его размер в родительском сером контейнере 
в левом углу созданного контейнера есть фиолетовая кнопка, нажав на нее, внутри этого контейнера будет создан другой контейнер, и теперь первый контейнер будет родительским для нового созданного контейнера. , 
проблема в том, что я могу изменить размер внутреннего контейнера, но не могу его переместить, или, скорее, он перемещается вместе с родительским компонентом. внутренний компонент будет перемещаться внутрь внешнего только тогда, когда родительский компонент касается границ своего родителя, серый код 
в коде этого Похоже, у меня есть компонент, который сам по себе содержит компонент, который компонент Box вызывается внутри Rdn - это блок, который вы видите на экране, Rdn заставляет его двигаться
type Props = {
width: string;
height: string;
color: string;
};
class BoxWrapper extends React.Component<Props> {
state = {
width: "100",
height: "40",
x: 0,
y: 0,
};
render() {
const { width, height, color } = this.props;
return (
<Rnd
size={{ width: this.state.width, height: this.state.height }}
position={{ x: this.state.x, y: this.state.y }}
bounds="parent"
onDragStop={(e: any, d: any) => {
e.stopPropagation();
this.setState({ x: d.x, y: d.y });
}}
minHeight={16}
minWidth={16}
onResize={(
e: any,
direction: any,
ref: any,
delta: any,
position: any
) => {
this.setState({
width: ref.style.width,
height: ref.style.height,
...position,
});
}}
>
<Box
x={this.state.x}
y={this.state.y}
width={this.state.width}
height={this.state.height}
externalHeight={height}
externalWidth={width}
color={color}
/>
</Rnd>
);
}
}
export default BoxWrapper;
внутри компонента Box, фиолетовая кнопка отмечена, и если она нажата, вам нужно создать компонент BoxWrapper
type BoxProps = {
x: number;
y: number;
width: string;
height: string;
externalWidth: string;
externalHeight: string;
color: string;
};
class Box extends React.Component<BoxProps> {
state = {
isClick: false,
isCreate: false,
};
render() {
const {
x,
y,
width,
height,
externalWidth,
externalHeight,
color,
} = this.props;
const externalH = parseInt(externalHeight);
const externalW = parseInt(externalWidth);
const boxWidth = parseInt(width);
const boxHeight = parseInt(height);
const xUpperLeft = x;
const yUpperLeft = y;
const xUpperRight = x + boxWidth;
const yUpperRight = y;
const xDownLeft = x;
const yDownLeft = y + boxHeight;
const xDownRight = x + boxWidth;
const yDownRight = y + boxHeight;
return (
<>
<div
style={{
margin: 0,
height: "100%",
padding: 0,
backgroundColor: color,
}}
>
<div className="wrapper">
<button
style={{
width: 0,
height: "14px",
borderRadius: "1px",
backgroundColor: "#fff",
display: "flex",
justifyContent: "center",
fontSize: 9,
}}
onClick={() => this.setState({ isClick: !this.state.isClick })}
>
?
</button>
<button
style={{
width: 0,
height: "14px",
borderRadius: "1px",
backgroundColor: "#a079ed",
display: "flex",
justifyContent: "center",
fontSize: 9,
}}
onClick={() => this.setState({ isCreate: !this.state.isCreate })}
/>
</div>
{this.state.isCreate && (
<BoxWrapper
width={width}
height={height}
color="#42d5bc"
/>
)}
</div>
{this.state.isClick && (
<Tooltip
leftDistance={xUpperLeft}
topDistance={yUpperLeft}
rightDistance={externalW - xUpperRight}
bottomDistanse={externalH - yDownLeft}
/>
)}
</>
);
}
}
как мне сделать так, чтобы я мог свободно перемещать внутренний контейнер без автоматического перетаскивания родительского контейнера, который я пытался использовать в методе onDragStop в Rnd, чтобы указать event.stopPropafgation(), но это не работает вообще, я не знаю, что делать
это рабочий пример моей проблемы: внутренний Rnd-контейнер имеет границы bounds = "parent "а внешний -" окно "