如何触发从父组件到子组件的事件

Question

我正在尝试触发从父组件到子组件的事件，但我没有找到适合我的情况的任何解决方案。

我的用例是一个父组件，它通过显示按钮或其他方式处理保存操作，以及一个子组件，它需要知道何时必须保存数据。

唯一让我满意的方法是使用RxJS，但我觉得这不是一个好的做法。

我指定我处于尝试编写 UI 库的上下文中，因此我尝试尽可能简化并键入 props。

此外，我的子组件是动态注入到父组件中的，所以我不能只用父组件包装子组件并将回调传递给父组件。

我想到了两个解决方案：

1. 通过使用布尔值

我的父组件可以处理布尔值并将其传递给子组件。当布尔值发生变化时，我的子组件可以做出反应。

我认为这更像是一种解决方法，而不是真正的解决方案。

2. 通过使用参考

父组件显式调用子组件中定义的函数。

为什么不呢，但我觉得它很丑。我失去了打字，我的子组件

使用 RxJS 对我来说最好的解决方案

如果我可以使用 RxJS，我会将一个可观察值从父级传递给子级，如下所示：

const Parent = () => {

  const [subject] = useState(() => {
    return new Subject<void>()
  })

  const onSaveClicked = () => {
    subject.next()
  }

  return <>
    <div>
      <button onClick={onSaveClicked}>
        Save something
      </button>
    </div>
    <div>
      <Child saveObservable={subject.asObservable()}/>
    </div>
  </>
}

const Child = ({saveObservable}: {saveObservable: Observable<void>}) => {

  const [saveCounter, setSaveCounter] = useState(0)

  useEffect(() => {
    const subscription = saveObservable.subscribe({
      next: () => {
        // do someting, save for exemple

        // Here I increment the count to show the event is well handled
        setSaveCounter(x => x + 1)
      }
    })

    return () => subscription.unsubscribe()
  }, [saveObservable]);

  return <>
    Save triggered count: {saveCounter}
  </>
}

我不明白为什么没有现有的机制允许我这样做，我觉得我搞砸了一些东西。

有人可以启发我吗？

Answer 1

React 中有一个 Context API，您可以利用它来实现您的要求。通过上下文，您可以将数据沿着组件树传递，而无需在每个级别手动传递 props（prop-drilling）。您可以创建一个上下文来处理保存操作并在子组件中使用它，它还简化了组件结构并消除了对第三方库（如

RxJS

）的需要。让我帮助您使用它的用例。

[编辑正在进行中...]