Tepki - Ebeveyn bileşenindeki alt bileşeni bulunan referansı alın

Question

Ref kullanan bir şey yapmaya çalışmıyorum. Sadece elemanın ref'e ihtiyacım var çünkü eleman bir tuval, ve bir tuval üzerine çizmek için onun ref ihtiyacı var.

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

===== (teknik çalışır, ancak yabancı hissi) I güvenilir

şey olan ref fonksiyonunda, böylece this ana bileşeni belirtmektedir, ebeveynde <canvas> tanımlamaktır. Sonra çocuğa <canvas> ve this.canvas'u iki ayrı sahne olarak geçiriyorum. Çocuğun render işlevinde <canvas> (this.props.canvasJSX olarak adlandırılır) döndürüyorum ve bağlamını çizmek için this.canvas (this.props.canvasRef adlı) kullanıyorum. aşağıya bakın: Bunu gerçekleştirmenin bir daha standart yol

class Parent extends Component { 
    clickDraw =() => { 
    // now I have access to the canvas context and can draw 
    const ctx = this.canvas.getContext('2d'); 
    ctx.fillStyle = "#00FF00"; 
    ctx.fillRect(0,0,275,250); 
    } 

    render() { 
    const canvas = (
     <canvas width={300} 
       height={500} 
       ref={canvasRef => this.canvas = canvasRef}> 
     </canvas> 
    ); 
    return (
     <div> 
     <button onClick={this.clickDraw}> Draw </button> 
     <Child canvasJSX={canvas} 
       canvasRef={this.canvas} /> 
     </div> 
    ); 
    } 
} 


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

    render() { 
    return this.props.canvas; 
    } 
} 

var mı?

Answer 1

Aslında ilk yaklaşım kullanarak olmalıdır ve ebeveyn

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

Sadece bu yaklaşımı kullanabilirsiniz çocuk elemanlar ref erişebilirler çocuk bileşeni class olarak ilan olmasıdır. olurdu React docs elde önerilen model önlenemez ise

Answer 2

:

import React, {Component} from 'react'; 

const Child = ({setRef}) => <input type="text" ref={setRef} />; 

class Parent extends Component { 
    constructor(props) { 
     super(props); 
     this.setRef = this.setRef.bind(this); 
    } 
    componentDidMount() { 
     // Call function on Child dom element 
     this.childInput.focus(); 
    } 
    setRef(input) { 
     this.childInput = input; 
    } 
    render() { 
     return <Child setRef={this.setRef} /> 
    } 
} 

AnaAna sitesindeki this bağlı destek olarak bir işlev geçer. Çocuk 'ın ref geri setRef arayıp biz zaten Ana puan belirtildiği gibi this için childInput özelliği ekler tepki.