React封装组件怎么获取子组件属性？

主要是想实现一个简单拖拽布局的功能，代码如下：

import React from 'react';
import classNames from "classnames/bind";
import styles from './index.less'
const cx = classNames.bind(styles);
export class Box extends React.PureComponent{
  componentDidMount() {
    const resize = document.getElementById('drag_resize');
    const handle = document.getElementById('drag_handle');
    const left = document.getElementById('drag_aside');
    const right = document.getElementById('drag_main');
    const box = this.boxRef;
    handle.onmousedown = function (e) {
      const startX = e.clientX;
      resize.left = resize.offsetLeft;
      document.onmousemove = function (e) {
        const endX = e.clientX;
        let moveLen = resize.left + (endX - startX);
        const maxT = box.clientWidth - resize.offsetWidth;
        if (moveLen < 150) moveLen = 150;
        if (moveLen > maxT - 150) moveLen = maxT - 150;
        resize.style.left = moveLen;
        left.style.width = moveLen + "px";
        right.style.width = (box.clientWidth - moveLen - 1) + "px";
      document.onmouseup = function (evt) {
        document.onmousemove = null;
        document.onmouseup = null;
        resize.releaseCapture && resize.releaseCapture();
      resize.setCapture && resize.setCapture();
      return false;
  render() {
    const { children, style } = this.props;
    const mergeClass = cx ({
      box: true,
      'slide-container': true
    return (
      <div ref={ref=>{ this.boxRef = ref }} className={mergeClass}>
        {children}
export class Resize extends React.PureComponent{
  render() {
    return (
      <div id='drag_resize' className={styles.resize}>
        <div id='drag_handle' className={styles.handle} />
export class Left extends React.PureComponent{
  render() {
    const { children, style } = this.props;
    const mergeClass = cx ({
      left: true,
      container__sidebar: true,
      'custom-scroll-wrapper': true
    return (
      <aside id='drag_aside' className={mergeClass} style={style}>
        {children}
      </aside>
export class Right extends React.PureComponent{
  render() {
    const { children, style } = this.props;
    const mergeClass = cx ({
      right: true,
      container__main: true
    return (
      <main id='drag_main' className={mergeClass} style={style}>
        {children}
      </main>
}

我想这样使用：

import { Box, Left, Right, Resize } from "@/components/DragLayout";
// render