Reactjs 将道具传递给安装组件后创建的子级

我有一个组件，它是

的容器。我还有其他组件，它们将画布上下文作为道具，并可用于以各种方式操纵它；像这样：

class App extends React.Component {
  ctx: CanvasRenderingContext2D;
  canvas: HTMLCanvasElement;

  componentDidMount() {
    this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
    this.forceUpdate();
  }

  render() {
    const circle = this.ctx ? <Circle ctx={this.ctx} /> : '';
    return (
      <canvas ref={ref => (this.canvas = ref as HTMLCanvasElement)}>
        {circle}
      </canvas>
    );
  }
}

const Circle = ({ ctx }: { ctx: CanvasRenderingContext2D }) => {
  ctx.arc(10, 10, 10, 0, 6);
  ctx.stroke();
  return null;
};

类应用程序扩展了React.Component{
ctx:CanvasRenderingContext2D；
画布：HTMLCanvasElement；
componentDidMount（）{
this.ctx=this.canvas.getContext（'2d'）作为CanvasRenderingContext2D；
这个.forceUpdate（）；
}
render（）{
const circle=this.ctx？：''；
返回(
（this.canvas=ref as HTMLCanvasElement）}>
{圆}
);
}
}
常量圆=（{ctx}:{ctx:CanvasRenderingContext2D}）=>{
ctx.arc（10,10,10,0,6）；
ctx.stroke（）；
返回null；
};

这就像预期的那样，画了一个圆圈，但我不确定这是最好的方法。我有几个问题：

• 我不确定关于

  forceUpdate

  的电话
• 如果我不在

  ctx

  上执行条件检查，则当Circle首次渲染时，它将是未定义的

我最初使用的是

componentWillMount

，但问题是没有设置ref，因此

this.canvas

未定义

---

是否有合适的方法将道具传递给依赖于父组件中引用的子组件？

我认为一种方法如下：

class App extends React.Component {
  ctx: CanvasRenderingContext2D;
  canvas: HTMLCanvasElement;

  constructor(props){
     super(props);
     this.state={ ctx:null }
  }

  componentDidMount() {
    this.setState({ctx:this.canvas.getContext('2d') as CanvasRenderingContext2D})
  }

  render() {
    const circle = this.state.ctx? <Circle ctx={this.state.ctx} /> : '';
    return (
      <canvas ref={ref => (this.canvas = ref as HTMLCanvasElement)}>
        {circle}
      </canvas>
    );
  }
}

类应用程序扩展了React.Component{
ctx:CanvasRenderingContext2D；
画布：HTMLCanvasElement；
建造师（道具）{
超级（道具）；
this.state={ctx:null}
}
componentDidMount（）{
this.setState（{ctx:this.canvas.getContext（'2d'）作为CanvasRenderingContext2D}）
}
render（）{
const circle=this.state.ctx？：“”；
返回(
（this.canvas=ref as HTMLCanvasElement）}>
{圆}
);
}
}