点击React + Redux

Question

我正在尝试学习React，现在我正在构建一个类似于React-big-scheduler的简单事件调度程序。我正在使用Redux来存储每个单元格的位置。基本上，我要尝试的是单击单元格，在该位置应根据单元格的位置和大小（几乎覆盖所有单元格）呈现一个React-rnd component，以后可以将其调整大小或拖动到另一个位置

据我了解，问题在于在Scheduler组件中渲染元素时。任何想法都值得赞赏。

Full code and demo here)（我知道它显示了一些错误，但是现在我只想在单击时渲染该元素）

Answer 1

您没有显示减速器，如何对值进行硬编码？您应该将它们作为初始状态放入减速器中，如下所示：

const reducer = (state = hardCodedValues, action) => {}

为您的减速器添加代码，这样可能更容易发现问题。

在看到代码和框后进行编辑：

正如其他人所说，减速器中似乎存在一些非常不纯正的逻辑。您可以通过在cellProps数组上使用.push而不是返回新的状态来直接修改状态。在化简器案例中也有许多条件语句，这使得整个状态非常不可预测。据我了解，您的ADD_CELL_PROP操作似乎无法很好地更新状态，只能从UPDATE_CELL_PROP操作中进行更新。

我建议删除所有调整大小逻辑，并使系统的纯净部分正常工作。调整大小和拖动是非常基于dom的事件，使用Redux可能很难处理，因此只有在确保所需的行为正确运行后才添加它们。

Answer 2

您不应该在React中使用document.getElementById。如果有什么用，您可以使用ref（在此处了解更多信息：https://reactjs.org/docs/refs-and-the-dom.html），但是在这种情况下，您不需要。您应该在Scheduler组件中使用“ cellClick”方法，然后将其与cellProps一起传递给<Test/>组件。

例如：<Test onClick={(e) => cellClick(e, props)} key={cellProp.id}/>

由于不需要以这种方式检索DOM元素，因此在响应中不需要

id。仅在使用组件数组时才需要键值。需要将onClick属性传递给可点击的组件时，请对其进行研究。