将支柱传递给组件安装后创建的子组件

Question

我有一个组件是<canvas>的容器。我有其他组件将画布上下文作为道具，可以用来以各种方式操纵它;像这样：

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

这可以按预期工作并绘制一个圆圈，但我不确定这是最好的方法。我有几个问题：

• 我不确定forceUpdate电话。
• 如果我不对ctx进行条件检查，那么当Circle首次渲染时，它将是未定义的。

我最初使用componentWillMount，但问题是ref没有设置所以this.canvas是未定义的。

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

Answer 1

我认为这样做的一种方法如下：

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