如何使用 Flux 中渲染的 DOM 元素的详细信息调用 actioncreator？答案

【问题标题】：How do I call an actioncreator with details of the rendered DOM element in Flux?如何使用 Flux 中渲染的 DOM 元素的详细信息调用 actioncreator？
【发布时间】：2023-03-29 14:34:01
【问题描述】：

我的用例：

ComponentA 渲染单个 ReactQuill（类似于 textarea）组件
ReactQuill 的 DOM 高度被其他组件使用
我希望 ComponentA 调用 DOM 高度为的 ActionCreator 反应奎尔。然后这将更新负责持有的商店该数据
我发现 ReactQuill 的高度会在三种情况下发生变化

分别是：

当用户在字段中输入时
当浏览器宽度改变时
关于初始创建

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

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

有什么想法吗？还是我接近这个错误？

干杯

【问题讨论】：

标签： reactjs reactjs-flux flux

【解决方案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);
}

【讨论】：

文本更改事件不会在创建时触发。我将如何使用 setTimeout？我试图这样做，但我仍然收到错误。
我的意思是你可能在编辑器初始化时自己设置内容（例如加载保存的数据）。如果没有，您也可以使用空文本对其进行初始化，以便它在创建时确实触发。对于 setTimeout，我将在答案中添加示例
setTimeout 有效。感觉有点脏，但我想不出另一种解决方法。感谢您的帮助