当页面中有两个相同组件渲染的dom时的区分方法

情景如下：一个页面中有两个Drawer，渲染的dom相同 但是数据不同，有个需求是点击左右按钮滑动一个表格
第一次：首先想到的时候找id但是没有动态赋予id这就是一个页面中有两个id相同的表格通常是点击第二个drawer上的左右按钮时第一个drawer的表格进行了滚动-_-！！！
第二次：自己想了个很笨的办法勉强实现了这一功能，我的方法是一层层的找不同的class 2333 找到classList包含：antd-pro-pages-dashboard-drawer-visible这个类的面板 从这个面板（在渲染面板时传不同的id进去）里面找id为tableContainer的表格
附上代码：

 //判断当前页面是national还是area进行操作
    const tableContainer = document.getElementById('tableContainer');
    if (_isUndefined(tableContainer)) {
      return null;
    }
    const isShowAreaDrawer = $('#area');
    const classlist = isShowAreaDrawer[0].parentElement.parentElement.classList;
    let showDrawer = false;
    _forEach(classlist, (item, index) => {
      if (item === 'antd-pro-pages-dashboard-drawer-visible') {
        showDrawer = true;
      }
    });
    if (showDrawer === false) {
      //说明当前是national面板
      $('#national #tableContainer').css('margin-left', '-2.05rem'); //style.marginLeft = '-2.05rem'
    } else {
      $('#area #tableContainer').css('margin-left', '-2.05rem');
    }

第三种：来了来了他来了 大佬教我的超简单的方法（自己真实学疏才浅）
用jquery 点击事件会有event.tartget 根据这个找到这个target的父组件的一个className(这里用className的原因是id会重复有风险），然后再这个父类名里面找滚动表格的className
附上代码（膜拜大佬）

const rightBtn = event.target;
    const tableWrapp = $(rightBtn).closest('.throughTopPart');
    const tableContainer = tableWrapp.find('.scrollableTableContent');
    tableContainer.css('margin-left', '-2.05rem');

大佬还告诉了我一个方法 但是我太笨了没听懂 （笑哭。。。。）
大致意思是在调用子组件的时候传一个方法进去，然后用这个方法在父组件对子组件的某个表格的滚动进行控制，等我修炼好了来填坑（如果记得的话 哈哈哈）