React畫布上下文被寫入componentDidMount

Question

我正在從數組中生成組件，並且每個組件都有我想要使用componentDidMount來獲取上下文的畫布元素。它工作，但只有當我有一個組件。如果您查看完整的codepen示例，則在加載每個組件後，上下文會被覆蓋，並且只捕獲最後一個組件的上下文。

如何從每個部件搶上下文並將其分配給一個值，這樣我可以在父組件操縱呢？

它通過在demo

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> 
    ); 
    } 
}); 

Answer 1

尋找在這種情況下（我想？），理想的情況是創建該canvas的組成部分，應該是處理自己的彩色化和交互更有意義......和處理自己的上下文。由於您創建的context正坐落在全球空間中，因此每個新創作都會被忽略，而不是坐在課堂上。

這是一個將這些上下文傳遞給ColorPicker類的版本 - http://codepen.io/tholman/pen/a3ef6cff6022bc1eaa44e5495a4e32dc/?editors=001，其中正在發生着色。

我對反應並不是很滿意，所以可能會有一種「反應」的方式來做到這一點...但是這讓我在晚上睡覺。