如何识别在React + Flux中触发状态更改的组件？

Question

触发状态更改的ID组件的规范React + Flux方式是什么？

我有一个允许用户使用HSL颜色空间创建调色板的应用程序。

以下是我的应用的组件结构：

Container (this component gets state and passes it down the chain)
 | PalettePicker
   | ColorPicker
     | Slider (this component fires action)
     | Slider
     | Slider
   | (As many ColorPickers as colors)
 | ImageSamples (not relevant, but dependent on palette)

以下是ColorPicker组件：

每个ColorPicker包含3个Slider组件，这些组件会触发更新商店的事件。然后商店更新调色板并将整个调色板向下传递到Container组件，该组件将其作为props传递给其子组件。

这是我在Store处理滑块更改事件的函数（我正在使用Reflux）：

sliderChange: function(newValue) {
    var modifiedPalette = this.palette;
    modifiedPalette[newValue.colorIndex][newValue.colorPartsIndex] = newValue.value;
    this.trigger(modifiedPalette)
}

我的调色板是HSL颜色值的数组，所以类似于：

[ [350, 100, 50], [340, 100, 40], ... ]

“颜色”是上面的三项数组之一，我将颜色数组中的每个项目称为“颜色部分”，因为它代表颜色的H，S或L.

将颜色和颜色部分索引作为道具传递下来似乎不太优雅。我目前正在构建这样的组件：

colorPickers = palette.map(function(color, i) {
    return (
        <ColorPicker 
             key={i}
             colorIndex={i}
             color={color}
        />
    )
});

据我所知，我需要将colorIndex作为道具传递，以便我的子组件可以知道它映射到的调色板中的哪种颜色，以便我可以将该知识传递给商店。 / p>

这种惯用的React + Flux方法是什么？

Answer 1

我建议不要让ColorPicker组件自己调用任何动作，而是将其作为＆＃34; onChange＆＃34;支柱。它不需要知道它是什么索引。 您可以绑定onChange函数，以便它将传递索引：

colorPickers = palette.map(function(color, i) { 
   return ( 
      <ColorPicker key={i} 
          onChange={this.changeColor.bind(this, i)} 
          color={color} 
      /> 
   ) 
});

changeColor函数如下所示：

changeColor : function(colorIndex,  colorArray) {...}

它应该接收整个颜色（数组）并使用它和索引激发相应的Reflux动作。 这样，ColorPicker只需要使用更改的新颜色触发onChange函数。

对颜色选择器内的每个滑块执行相同的操作。传递一个已经绑定到partIndex的onChange函数。当触发该函数时，ColorPicker应该构造一个新的颜色数组，并调用它自己的onChange prop。

希望它足够清楚。动机是 - 每个组件都应该获得一个简单的回调函数，并仅输出它负责的内容。它不需要知道任何其他细节。 而不是一直传递越来越多无用的索引道具，只是通过有限的回调。 它将简化您的组件，并让您的高级组件处理构建Flux操作本身的详细信息。