Javascript 在componentDidMount中重写React画布上下文

我从数组生成组件，每个组件都有画布元素，我想使用

componentDidMount

获取上下文。它工作，但只有当我有一个组件。如果您查看我的完整代码笔示例，则在加载每个组件后，上下文将被覆盖，并且只捕获最后一个组件的上下文

如何从每个组件获取上下文并将其分配给一个值，以便在父组件中对其进行操作

通过查看

var输出=[
{name:'output1'}，
{name:'output2'}，
{name:'output3'}
];
var App=React.createClass({
render:function（）{
返回(
{outputs.map（函数（输出）{
返回
})}
);
}
});
var ColorPicker=React.createClass({
getInitialState:函数（）{
返回{
颜色：RGB颜色
}
},
componentDidMount:function（）{
var canvasB=this.refs.canvasBlock；
var canvasS=this.refs.canvasStrip；
ctxB=canvasB.getContext（'2d'）；
ctxS=canvasS.getContext（'2d'）；
此.props.blockFill（ctxB）；
这个.props.stripFill（ctxS）；
},
渲染：函数（e）{
变量样式={
不透明度：this.props.isVisible？'1'：'0'
};
返回(
);
}
});

在这种情况下（我认为？），理想情况下，创建

画布的组件应该处理自己的着色和交互。。。以及处理自己的上下文。由于您创建的
上下文
位于全局空间中，因此每次新创建都会覆盖它们，而不是位于它们的类中

下面是一个版本，它将这些上下文传递到ColorPicker类-，在该类中进行着色

我对react不是很在行，所以可能有一种“react”的方法来做这件事。。。但这会让我晚上睡觉

var outputs = [
  { name: 'output1' },
  { name: 'output2' },
  { name: 'output3' }
];

var App = React.createClass({
  render: function() {
    return (
      <div>
        {outputs.map(function(output) {
         return <ColorPickerContainer id={output.name} />
        })}
      </div>
    );
  }
});

var ColorPicker = React.createClass({
  getInitialState: function() {
    return {
      color: rgbColor
    }
  },
  componentDidMount: function() {
    var canvasB = this.refs.canvasBlock;
    var canvasS = this.refs.canvasStrip;
    ctxB = canvasB.getContext('2d');
    ctxS = canvasS.getContext('2d');
    this.props.blockFill(ctxB);
    this.props.stripFill(ctxS);
  },
  render: function(e) {
    var styles = {
      opacity: this.props.isVisible ? '1' : '0'
    };
    return(
      <div id="color-picker" style={styles} className={this.props.id}>
        <canvas id="color-block" 
                height={hB} 
                width={wB} 
                onMouseDown={this.props.mouseDownBlock}
                onMouseMove={this.props.mouseMoveBlock}
                onMouseUp={this.props.mouseUpBlock}
                ref="canvasBlock"></canvas>
        <canvas id="color-strip" 
                height={hS} 
                width={wS} 
                onClick={this.props.clickStrip}
                ref="canvasStrip"></canvas>
      </div>
    );
  }
});