Question

我有时喜欢在React中使用局部状态。有时我还觉得我想触发一个修改子状态的函数。

幸运的是，通过将一个简单的pubsub / observable / emitter对象通过子项订阅的prop传递给子项来实现该目标似乎微不足道。我对React生态系统有些陌生，所以我想知道这是否可以接受。

例如，我正在创建一个简单的可观察对象，如下所示：

const usePubSub = () => ({
  subscriber: null,
  emit() {
    if (this.subscriber) this.subscriber();
  },
  subscribe(callback) {
    this.subscriber = callback;
  }
});

然后假设是这样使用它：

function Parent(props) {
  const pubsub = usePubSub();
  return (
    <>
      <button type="button" onClick={() => pubsub.emit()}>Click me!</button>
      <Child pubsub={pubsub} />
    </>
  )
}

function Child(props) {
  const [count, setCount] = useState(0);

  // !!!!! Danger?
  props.pubsub.subscribe(() => setCount(count + 1));

  return (
    <p>The count is: {count}</p>
  )
}

这将有效地允许我使用父组件上的按钮来更改孩子的内部状态，并且在我的测试中，似乎可以正常工作，但是，我很紧张，因为我找不到其他人做这样的事的例子。您认为这是个好方法吗？

Answer 1

因此，完成您所要说的话的“反应方式”将更像这样：

{{1}}

您不需要在子组件中订阅可观察对象，因为子组件已经在观看传递给它的道具。

在React中传递（并订阅）可观察对象作为道具可以吗？

1 个答案: