这个很好用，但是，每当我拆分这两个组件时：“编辑器”和“编辑器工具栏”（在链接中，我以相同的方式更新这两个组件的值）编辑器变得非常慢，同时编辑器工具栏也不工作（如果我有一个react组件，它同时为这两个组件保留一个状态，则此代码工作正常，但现在我没有“状态”，我必须以Angular 更新值，使其工作相同我将这两个组件合并为一个保持状态的内部react（这就是我试图实现的）
我假设问题在于如何将值分配给这两个组件
一个星期的努力和渴望来解决这个问题。
编辑

<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>

反动码

.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(() => {});
          }
        },
      },
    }),
  ])

React码

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;