2017-04-25 22 views
6

में बाल घटक में रेफरी प्रस्तुत करें मैं रेफरी का उपयोग करके कुछ भी हैकी करने की कोशिश नहीं कर रहा हूं। मुझे केवल तत्व को रेफरी चाहिए क्योंकि तत्व कैनवास है, और कैनवास पर आकर्षित करने के लिए आपको इसकी रेफरी चाहिए।प्रतिक्रिया - मूल घटक

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

=====

कुछ मैंने कोशिश की (जो तकनीकी रूप से काम करता है लेकिन अजीब लगता है) माता-पिता में <canvas> परिभाषित करते हैं, अपने रेफरी समारोह में ऐसा है, तो this माता पिता घटक के लिए संदर्भित करता है। फिर मैं <canvas> और this.canvas को बच्चे को दो अलग-अलग प्रोप के रूप में पास करता हूं। मैं वापस जाने के बच्चे की <canvas> (this.props.canvasJSX नाम) में समारोह प्रस्तुत करना, और मैं this.canvas (this.props.canvasRef नाम) का उपयोग उस पर आकर्षित करने के लिए उसके संदर्भ मिलता है। नीचे देखें:

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

क्या यह प्राप्त करने का एक और मानक तरीका है?

+0

संभावित डुप्लिकेट [मैं मूल घटक में किसी बच्चे घटक के रेफरी कैसे प्राप्त करूं>> (https://stackoverflow.com/questions/37647061/how-do-i-access-refs-of-a-child -कंपोनेंट-इन-द-पैरेंट-घटक) – arpl

+0

कृपया माता-पिता घटक – zloctb

उत्तर

4

आप वास्तव में पहले दृष्टिकोण का उपयोग किया जाना चाहिए और आप माता-पिता

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

आप केवल इस दृष्टिकोण का उपयोग कर सकते हैं में बच्चे तत्वों refs उपयोग कर सकते हैं बच्चे घटक एक class के रूप में घोषित किया गया है।

+0

धन्यवाद में गेटर और सेटर का उपयोग करें! एक मामूली टाइपो को छोड़कर बिल्कुल सही ('refs' 'ref' होना चाहिए) जिसे मैंने संपादित किया था। – tscizzle

+0

शुभम मुझे यकीन नहीं है कि कई एचटीएमएल तत्वों [मेरी परियोजना] (https://stackblitz.com/edit/react-pulnct?file=Posts.js) – Omar

+1

@Omar के लिए इस कार्यान्वयन को कैसे करें, अपने स्निपेट को संपादित करें इसे जांचें https://stackblitz.com/edit/react-yqcgey?file=Posts.js –

0

यह सुझाव दिया पैटर्न React docs से निकाला होगा टाला नहीं जा सकता है:

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

जनकजनक के this के लिए बाध्य कर आधार के रूप में एक समारोह से गुजरता है। प्रतिक्रिया बाल के ref कॉलबैक setRef फोन और this जो के रूप में हम पहले से ही जनक को अंक ध्यान दिया करने के लिए childInput संपत्ति जोड़ देती है।

संबंधित मुद्दे