我正试图让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
答案 0 :(得分:4)
这是一个好主意,但你有一些问题:
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组件在渲染上绘制!