當頁面中有兩個相同組件渲染的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');

大佬還告訴了我一個方法 但是我太笨了沒聽懂 （笑哭。。。。）
大致意思是在調用子組件的時候傳一個方法進去，然後用這個方法在父組件對子組件的某個表格的滾動進行控制，等我修煉好了來填坑（如果記得的話 哈哈哈）