将第二个指令绑定到同一个数据对象时的 react2angular 问题它们控制彼此的值

如何解决将第二个指令绑定到同一个数据对象时的 react2angular 问题它们控制彼此的值

这很好用，但是每当我拆分这两个组件时：“编辑器”和“编辑器工具栏”（在链接中我以相同的方式更新两者的值）编辑器变得非常慢，同时编辑器工具栏也不起作用（这代码工作正常，如果我有 1 个反应组件，它同时保持 1 个状态，但现在我不“状态”我必须以角度更新值，以便它以相同的方式工作，我将这 2 个组件作为 1 个保持状态在反应中（那是我正在努力实现的目标）

我认为问题在于我如何为两个组件赋值

1 周试图解决这个问题。

编辑器

<kmp-note-editor has-toolbar="hasToolbar" ng-model="editorState.content" ng-change="handleDocumentNoteChange()" style="background-color: white; border: solid 1px #D2D6DE;" ng-disabled="(documentNote.status.id_name==='signed' && !enableSignedDocument) || encounterIsClosed"></kmp-note-editor>

工具栏

<kmp-note-editor-toolbar ng-model="editorState.content" ng-change="handleToolbarChange()" ng-disabled="(documentNote.status.id_name==='signed' && !enableSignedDocument) || encounterIsClosed"></kmp-note-editor-toolbar>

React2Angular 代码

.directive("kmpNoteEditor",[
    "$timeout",($timeout) => ({
      restrict: "E",require: "ngModel",template:
        '<kmp-note-editor-with-toolbar-raw attr="1" disabled="disabled" value="viewValue" on-change="handleChange"></kmp-note-editor-with-toolbar-raw>',link: {
        pre: (scope,element,attrs,ngModelCtrl) => {
          scope.disabled = attrs.disabled;
          ngModelCtrl.$render = () => {
            render(ngModelCtrl.$viewValue);
          };

          function render(value) {
            scope.viewValue = value;
          }

          scope.handleChange = (change) => {
            console.log("CH");
            console.log(change);
            ngModelCtrl.$setViewValue(change.value);
            /* Anti Pattern!
             * https://github.com/angular/angular.js/wiki/Dev-Guide%3A-Anti-Patterns
             * Fixes bug (part 3): https://vabaco.atlassian.net/browse/EVXBL-7736
             */

            if (mobileAndTabletcheck()) {
              // ngModelCtrl.$setViewValue(change);
              // ngModelCtrl.$render();
            } else {
              if (scope.$$phase) {
                $timeout(function() {
                  fn();
                });
              } else {
                $timeout(function() {
                  scope.$apply(fn);
                });
              }
            }
            function fn() {
              $timeout(function() {
                if (!mobileAndTabletcheck()) {
                  if (
                    change.operations.every(
                      (operation) => operation.type === "set_selection"
                    )
                  ) {
                    // render(change.value);
                  } else {
                    // ngModelCtrl.$setViewValue(change.value);
                    // ngModelCtrl.$render();
                  }
                }
              });
            }
          };

          if (!mobileAndTabletcheck()) {
            ngModelCtrl.$formatters.push((html) => {
              return mobileAndTabletcheck()
                ? html
                : htmlSerializer.deserialize(html || "");
            });

            ngModelCtrl.$parsers.push((value) => {
              return mobileAndTabletcheck()
                ? value
                : htmlSerializer.serialize(value);
            });

            ngModelCtrl.$viewChangeListeners.push(() => {});
          }
        },},}),])

反应代码

import htmlSerializer from "@components/NoteEditor/htmlSerializer";
import * as React from "react";
import NoteEditor from "../NoteEditor";
import NoteEditorToolbar from "../NoteEditorToolbar";

interface NoteEditorWithToolbarProps {
  value: Object | string;
  onChange?: (Object) => void;
  disabled?: boolean;
  hasToolbar:boolean;
}
const createDOMPurify = require("dompurify");
const DOMPurify = createDOMPurify(window);
interface NoteEditorWithToolbarState {}

const NoteEditorWithToolbar = (props:NoteEditorWithToolbarProps) => {
  const [value,setValue] = React.useState(props.value);
  
  console.log(props)
  React.useEffect(() => {
    setValue(props?.value);
    console.log("sss")
  },[props.value]);
  const changeHandler = (event) => {
    if (!event.operations.some((operation) => operation.type === "set_value")) {
      setValue(event.value);
      props.onChange(event);
    }
  };
  return (
    <div className="kmp__NoteEditorWithToolbar" id="kmp__NoteEditorWithToolbar">
      {props.hasToolbar && (
        <NoteEditorToolbar
          value={value}
          onChange={changeHandler}
          disabled={props.disabled}
        />
      )}

      <NoteEditor
        value={value}
        onChange={changeHandler}
        disabled={props.disabled}
      />
    </div>
  );
};
export default NoteEditorWithToolbar;