如何使用 Flux 中呈现的 DOM 元素的详细信息调用 actioncreator？

Question

我的用例：

ComponentA 呈现单个 ReactQuill（类似于文本区域）组件
ReactQuill的DOM高度被其他组件占用
我希望 ComponentA 调用高度为 DOM 的 ActionCreator ReactQuill。这将更新负责持有的商店该数据
我发现ReactQuill的高度会发生变化的场景有3种

有：

当用户在字段中键入时
当浏览器宽度改变时
关于最初的创作

我有 1 和 2 在工作。但是我不知道如何在初始创建时调用动作创建器？

我尝试在 componentDidUpdate 中调用它，但它抛出一个错误，说它正在调度中。

有什么想法吗？还是我处理错了？

干杯

Answer 1

使用 componentDidUpdate 或其他生命周期事件将导致该错误，因为 Facebook 的 Flux 实现不希望操作导致另一个操作被触发（我假设有一个操作导致您的组件更新） .所以基本上你需要在另一个运行循环中触发动作。

当您的编辑器初始化时，您是否可以使用回调？例如，如果您使用的是 Quill（虽然我自己从未使用过，也没有测试过此方法），我找不到用于初始化的回调，但我猜您正在设置初始化内容您可以收听一个事件：text-change（在此处找到：http://quilljs.com/docs/events/#text-change）

editor.on('text-change', function(delta, source) {
  if (source == 'api') { // Maybe you want to dispatch action only when set through API
    Actions.updateEditorHeight(...);
  }
});

另一个我只会作为最后手段使用的 hacky 解决方案，因为可能有更好的解决方案是在组件的生命周期事件之一中使用 setTimeout。例如：

componentDidMount() {
  // init editor, perhaps load saved data
  setTimeout(function() {
    Actions.updateEditorHeight(...);
  }, 0);
}

如何使用 Flux 中呈现的 DOM 元素的详细信息调用 actioncreator？

How do I call an actioncreator with details of the rendered DOM element in Flux?

flux

reactjs

reactjs-flux