Question

该应用程序供用户创建树状结构。树节点定义为：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="parent" class="theme">
  <h1>Hello</h1>
  <div>
    <p>This is some sample text</p>
  </div>
  <h4>This is a h4</h4>
  <a href="#" id="button">Click</a>
</div>

UI看起来像

// This is  a node
{
    images: [{x:0, y:0, width: 100, height: 100}, ...],
    subnodes: {key1: [<node>...], key2: [<node>...]}
}

左侧是结果的总数据结构。右侧是用于在左侧选择的编辑节点。

问题是，我应该使用节点数据作为道具还是右手边的状态？

使用状态更容易修改节点数据，但风险不一致，因为它违反了单一事实来源。

如果我为右上组件使用道具，我必须将拖拽事件传播到右侧组件，然后支撑到最顶层组件，然后修改数据。

Answer 1

只要组件需要自行更改，它就应该进入状态。如果没有，它应该进入道具，你可以更多地作为组件的配置。

在您的情况下，我相信您当前使用的节点数据应该处于右上角组件状态，而您可以移动组件并且组件必须自行更改。完成后，使用从父组件传递为prop的更新函数更新源数据，并让数据再次向下流过组件。

状态较少，或者 dumb ，完全依赖于他们收到的道具的组件，并且只有在他们改变时才会更新，在我看来应该用于数据末尾的简单事情流。更复杂的自我修改组件（如拖放/调整大小组件）应该在活动时处理它自己的状态。

希望它有所帮助！

用于树状数据结构编辑器的道具或状态

1 个答案: