将上下文 $('body') 从 jQuery 传递到 Rails 以做出反应

如何解决将上下文 $('body') 从 jQuery 传递到 Rails 以做出反应

我正在向使用 jQuery 的 rails 页面添加一个 react 组件。我需要访问 react 组件中的 jQuery 上下文以查看 jQuery 所做的 .data() 更改。

haml 页面是这样的：

%div
  %input.select-all-checkBox{type: 'checkBox',data: {behavior: 'select-all-checkBox'}}
  %label
%div.disabled.dropdown.bulk-action-dropdown
  %span.fa.fa-ellipsis-h{type: 'button',data: {toggle: 'dropdown'}}
  %ul.dropdown-menu.dropdown-menu-left
    %li
      = react_component("Component")
    %li
      %a{href: 'javascript:void(0);',data: {behavior: 'do-something'}}
        Do something
    %li
      %a{href: 'javascript:void(0);',data: {behavior: 'do-something-else'}}
        Do something else

对应的 jQuery 文件有如下功能：

var Fun = (function() {

  function toggleCheckBox() {
    const $element = $(this);
    let checkedRecords = getCheckedRecords();

    if ($element.prop('checked')) {
      addVal(
        checkedRecords,$element.data('assessment-record-id'),$element.val()
      );
      bulkActionDropdown.removeClass('disabled');
    } else {
      removeVal(checkedRecords,$element.data('assessment-record-id'));
      bulkActionDropdown.addClass('disabled');
    }


    // changes that I want to access in my react component
    $element
      .closest('[data-behavior~=search-element-container]')
      .data('checked-records',checkedRecords);
  }
})();

$(document).on(
  'change','.abc-def [data-behavior~=search-element-container] [type=checkBox][data-assessment-record-id]',Fun.toggleCheckBox
);

在 React 组件中无法访问 jQuery 使用 .data() 所做的更改。如果我尝试在 React 中使用 jQuery 并搜索对同一 DOM 元素所做的更改，我会找到一个新实例，而不是最初由 jQuery 更改的实例。我需要访问在我的 React 组件中使用 .data() 所做的更改。

具体来说，关于对线路所做的更改：

$element
      .closest('[data-behavior~=search-element-container]')
      .data('checked-records',checkedRecords);

我需要在我的反应应用程序中使用以下方法读取这些数据：

const values = $('body')
    .find('input')
    .closest('[data-behavior~=search-element-container]')
    .data('checked-records');

但是当我在 React 组件中执行 import $ from 'jQuery' 和上述说明时，它完全创建了一个新的 jQuery 实例。

如何访问我的 React 组件中较早的 jQuery 实例所做的更改？