React函数组件相互调用的设计问题

Question

第一次开发函数式组件，遇到个问题，比较困惑，应该是很常见的场景，可能自己走偏了，求大神帮忙看下

我有两个组件，一个editor，一个toolbar，互为兄弟组件，都在Page父组件内。

都是函数式组件，现在希望点击一个toolbar中的保存按钮，让editor组件去做保存的操作

如果是类组件的话，我会给editor实现一个save方法，然后toolbar的onSaveClick回调在父组件中去获取Editor的实例IEditor，然后IEditor.save();

但是函数式组件没有实例这一说，于是我在父组件中用了一个state： shouldSave，然后点击保存的时候去把这个值更新为true，在Editor组件hooks监听这个值，去发起保存的请求。如下图所示，写了之后，还得在一定的时机把shouldSave设置回false，否则下次保存前还是true，无法触发。 感觉有点绕，我觉得我走偏了，一般这种场景怎么去设计呢？

（我也试了用消息通知来通信，toolbar emit一个save事件，editor来监听，但是感觉也有点绕，不太像是正常的做法。）

Answer 1

你图里的做法其实挺正常的，因为react是单向数据流，数据是自顶向下的，无法直接进行兄弟组件通信，无论是props、useImperativeHandle、或者你子组件比较多想要跨级传输需要使用context进行通信，本质上，都无法绕过父组件，顶多就是把save()方法“勾”到父组件去执行，没办法，就是有点绕。

Answer 2

函数组件也可以有你说的实例呀

type EditorRef = { save: () => void };

const Editor = React.forwardRef<EditorRef>((_, ref) => {
  useImperativeHandle(ref, () => ({
    save: () => alert("save"),
  }));
  return <>Editor</>;
});

const App = () => {
  const editor = useRef<EditorRef>(null);
  return (
    <>
      <Editor ref={editor} />
      <button onClick={() => editor.current?.save()}>Save</button>
    </>
  );
};

Answer 3

除了用useImperativeHandle
可以通过props啊
把editor的save方法传给toolbar
toolbar里面的保存按钮onclick={props.save}