Javascript React-获取父组件中的子组件中存在的ref

我不想用裁判做任何不正常的事。我只需要元素的ref，因为元素是画布，要在画布上绘制，需要它的ref

class Parent extends Component {
  clickDraw = () => {
    // when button clicked, get the canvas context and draw on it.
    // how?
  }

  render() {
    return (
      <div>
        <button onClick={this.clickDraw}> Draw </button>
        <Child />
      </div>
    );
  }
}


class Child extends Component {
  componentDidMount() {
    const ctx = this.canvas.getContext('2d');
    // draw something on the canvas once it's mounted
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
  }

  render() {
    return (
      <canvas width={300}
              height={500}
              ref={canvasRef => this.canvas = canvasRef}>
      </canvas>
    );
  }
}

---

有没有更标准的方法来实现这一点？

您实际上应该使用第一种方法，并且可以访问父元素中的子元素引用

class Parent extends Component {
  clickDraw = () => {
    // when button clicked, get the canvas context and draw on it.
    const ctx = this.childCanvas.canvas.getContext('2d');
    ctx.fillStyle = "#00FF00";
    ctx.fillRect(0,0,275,250);
  }

  render() {
    return (
      <div>
        <button onClick={this.clickDraw}> Draw </button>
        <Child ref={(ip) => this.childCanvas = ip}/>;
      </div>
    );
  }
}


class Child extends Component {
  constructor() {
     super();
     this.canvas = null;
  }
  componentDidMount() {
    const ctx = this.canvas.getContext('2d');
    // draw something on the canvas once it's mounted
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
  }

  render() {
    return (
      <canvas width={300}
              height={500}
              ref={canvasRef => this.canvas = canvasRef}>
      </canvas>
    );
  }
}

类父级扩展组件{
单击绘图=（）=>{
//单击按钮时，获取画布上下文并在其上绘制。
const ctx=this.childCanvas.canvas.getContext（'2d'）；
ctx.fillStyle=“#00FF00”；
ctx.fillRect（0,0275250）；
}
render（）{
返回(
画
this.childCanvas=ip}/>；
);
}
}
类子扩展组件{
构造函数（）{
超级（）；
this.canvas=null；
}
componentDidMount（）{
const ctx=this.canvas.getContext（'2d'）；
//挂载后在画布上画一些东西
ctx.fillStyle=“#FF0000”；
ctx.fillRect（0,0150,75）；
}
render（）{
返回(
this.canvas=canvasRef}>
);
}
}

---

只有当子组件声明为

类

时，才能使用此方法。如果无法避免，则从中提取的建议模式将是：

import React，{Component}来自'React'；
常量Child=（{setRef}）=>；
类父级扩展组件{
建造师（道具）{
超级（道具）；
this.setRef=this.setRef.bind（this）；
}
componentDidMount（）{
//子dom元素上的调用函数
this.childInput.focus（）；
}
setRef（输入）{
this.childInput=输入；
}
render（）{
返回
}
}

---

父级将函数作为绑定到父级的

此

的道具传递。React将调用子的

ref

回调

setRef

，并将

childInput

属性附加到

这个
上，正如我们已经指出的那样，它指向了父
谢谢！完美，除了一个轻微的输入错误（
refs
应该是
ref
），我对其进行了编辑。Shubham我不知道如何对多个HTML元素执行此实现@Omar，编辑了您的代码片段检查此可能的重复，请在父组件中使用getter和setter
class Parent extends Component {
  clickDraw = () => {
    // when button clicked, get the canvas context and draw on it.
    const ctx = this.childCanvas.canvas.getContext('2d');
    ctx.fillStyle = "#00FF00";
    ctx.fillRect(0,0,275,250);
  }

  render() {
    return (
      <div>
        <button onClick={this.clickDraw}> Draw </button>
        <Child ref={(ip) => this.childCanvas = ip}/>;
      </div>
    );
  }
}


class Child extends Component {
  constructor() {
     super();
     this.canvas = null;
  }
  componentDidMount() {
    const ctx = this.canvas.getContext('2d');
    // draw something on the canvas once it's mounted
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
  }

  render() {
    return (
      <canvas width={300}
              height={500}
              ref={canvasRef => this.canvas = canvasRef}>
      </canvas>
    );
  }
}