Question

我正试图让React如何更好地了解信息，并且出现了这个测试案例：

我有一个由Canvas对象和无限数量的子组成的组件。我想让孩子们访问这个组件的画布上下文。

我想知道我是否可以使用画布上下文为组件提供React Context并用它包装子项，然后让各个孩子选择成为使用者。但是，我不习惯React或其生命周期足以知道如何正确地执行此操作。我完全不在了吗？这甚至可能吗？

这是有问题的组成部分：

const CanvasContext = React.createContext('default');
class Screen extends React.Component
{    

  render(){

    return (<div>
              <canvas id="myCanvas" ref={(c) => this.context = c.getContext('2d')} width="200" height="100" style={{border: '1px solid black'}}></canvas> 
              <CanvasContext.Provider value = {this.context}>{this.props.children}
              </CanvasContext.Provider>
          </div>);

  }
}

现在，它包含一个孩子：

class Test extends React.Component{

  render(){
    return <CanvasContext.Consumer>{ctx => {
              ctx.moveTo(0, 0);
              ctx.lineTo(200, 100);
              ctx.stroke();}}
          </CanvasContext.Consumer>;   
  }
}
ReactDOM.render(<Screen><Test/></Screen>, document.getElementsByClassName('container-fluid')[0]);

非常感谢帮助。

编辑：这是一个Codepen：https://codepen.io/ejpg/pen/XqvGdp

Answer 1

这是一个好主意，但你有一些问题：

1）您的codepen中的React版本为15.4。您正在使用的新上下文api是在16.3中引入的。这就是你的codepen抛出错误的原因：

未捕获的TypeError：React.createContext不是函数

2）当第一次渲染发生时，ref仍然存在，这将导致此函数调用崩溃，因为上下文可能尚不存在：

ctx.moveTo(0, 0); // ctx isn't defined yet

ctx.moveTo不是函数

3）这是一个很好的机会，可以使用16.3的{{1}}功能帮助您管理您的参考资料;

createRef

4）获取上下文需要在第一次渲染之后发生，然后你想要在有上下文的情况下触发重新渲染，因此状态是一个好地方：

class Screen extends React.Component {
  canvas = React.createRef();
  render() {
    return <canvas ref={this.canvas} />
  }
}

这足以让你的Test组件在渲染上绘制！

Full code on codesandbox

如何使用React的Context功能将HTML5 Canvas上下文传递给this.props.children？

1 个答案: