Question

我正在使用react，alt和immutable进行商店管理。我的商品对象看起来或多或少是这样的：

offer: {
  groups: [{
     articles: [{
        optionGroups: [{
           options: []
        }]
     }]
  }]  
}

我遍历每个条目并显示一个表单来编辑组，文章.......如果某些内容发生了变化，我会调用OfferAction并将路径，更改字段和新值传递给实体，例如 OfferActions.update([2, 'articles', 5, 'optionGroups'], 'name', 'MyOptionGroup')

现在我想显示完全相同的表单，但是使用不同的占位符和changeHandlers。如果表单已填写，则应创建实体（必须调用另一个OfferAction）。这样做的最佳做法是什么？

我想到了以下几种可能性：

在OfferStore状态下推送空元素
空元素将像其他元素一样显示。我不需要复制任何组件，但是我需要实现多个检查，更改后必须调用OfferAction，渲染占位符，如果缺少则隐藏值。创建实体后，我只需将另一个空元素推送到商品数组上。

创建第二个组件
我可以创建一个我渲染的第二个组件。我将通过内部状态管理表单，在表单填写时创建实体并重置状态。这会导致重复的jsx。

是否有任何最佳做法可以实现这一目标，而不会重复组件或使其他组件复杂化？

Answer 1

所以你只想要不同的占位符和changeHandlers？

在需要复制的顶级组件上设置布尔prop。然后，为每个占位符/ changeHandler;

if(this.props.someBooleanValue){
    //alternate action or placeholder
} else {
    //original action or placeholder
}

在备用版本中加入someBooleanValue={true}，保留原件。

Answer 2

由于差异很小，我建议你第一种可能，所以为这两种情况创建一个渲染器。

向每个字段添加相应的JSON对象（对于组，文章e.t.c），包括空元素的字段并将其设置为true，例如isNew = true。如果你这样做，你可以对所有元素使用相同的changehandler。

更新的必要信息在JSON对象中，如果必须创建新元素，只需检查isNew标志。添加它之后，将标志设置为false，您可以像现有的那样处理它。

最佳实践：重用组件或写入重复项

2 个答案: