1

识别触发状态更改的组件的规范 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], ... ]

“颜色”是上述 3 项数组之一，我将颜色数组中的每个项称为“颜色部分”，因为它代表颜色的 H、S 或 L。

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

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

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

什么是惯用的 React+Flux 方式来做到这一点？

4

1 回答 1

1

我建议不要让 ColorPicker 组件本身调用任何操作，而是将其作为“onChange”道具传递。它不需要知道它是什么索引。您可以绑定 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 属性。

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

于 2015-09-27T00:59:30.780 回答