Question

我从数组生成组件，每个组件都有canvas元素，我想使用componentDidMount来获取上下文。它有效，但只有我有一个组件。如果查看我的完整代码集示例，则在加载每个组件后会覆盖上下文，并仅捕获最后一个组件的上下文。

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

通过查看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，其中着色正在发生。

我的反应并不是很好，所以可能有一个＆＃34;反应＆＃34;这样做的方式......但这让我晚上睡觉。

React canvas上下文重写在componentDidMount中

1 个答案: