बाहर से एक प्रतिक्रिया घटक विधि को बुलाओ

Question 1

मैं एक घटक को एक प्रतिक्रिया तत्व के उदाहरण से एक प्रतिक्रिया घटक द्वारा उजागर करना चाहता हूं।

उदाहरण के लिए, इस jsfiddle में । मैं संदर्भ alertMessageसे विधि को कॉल करना चाहता हूं HelloElement।

क्या अतिरिक्त रैपर लिखने के बिना इसे प्राप्त करने का एक तरीका है?

संपादित करें (JSField से कॉपी किया गया कोड)

<div id="container"></div>
<button onclick="onButtonClick()">Click me!</button>

var onButtonClick = function () {

    //call alertMessage method from the reference of a React Element! Something like HelloElement.alertMessage()
    console.log("clicked!");
}

var Hello = React.createClass({displayName: 'Hello',

    alertMessage: function() {
        alert(this.props.name);                             
    },

    render: function() {
        return React.createElement("div", null, "Hello ", this.props.name);
    }
});

var HelloElement = React.createElement(Hello, {name: "World"});

React.render(
    HelloElement,
    document.getElementById('container')
);

Question 2

एक आंतरिक फ़ंक्शन तक पहुंचने के दो तरीके हैं। एक, उदाहरण-स्तर, जैसे आप चाहते हैं, दूसरा, स्थैतिक स्तर।

उदाहरण

आपको रिटर्न से फ़ंक्शन को कॉल करने की आवश्यकता है React.render। निचे देखो।

स्थिर

ReactJS स्टैटिक्स पर एक नज़र । हालाँकि, ध्यान दें कि एक स्थिर फ़ंक्शन इंस्टेंस-स्तर डेटा तक नहीं पहुंच thisसकता है , इसलिए यह होगा undefined।

var onButtonClick = function () {
    //call alertMessage method from the reference of a React Element! 
    HelloRendered.alertMessage();
    //call static alertMessage method from the reference of a React Class! 
    Hello.alertMessage();
    console.log("clicked!");
}

var Hello = React.createClass({
    displayName: 'Hello',
    statics: {
        alertMessage: function () {
            alert('static message');
        }
    },
    alertMessage: function () {
        alert(this.props.name);
    },

    render: function () {
        return React.createElement("div", null, "Hello ", this.props.name);
    }
});

var HelloElement = React.createElement(Hello, {
    name: "World"
});

var HelloRendered = React.render(HelloElement, document.getElementById('container'));

फिर करते हैं HelloRendered.alertMessage()।

Question 3

आप पसंद कर सकते हैं

import React from 'react';

class Header extends React.Component{

    constructor(){
        super();
        window.helloComponent = this;
    }

    alertMessage(){
       console.log("Called from outside");
    }

    render(){

      return (
      <AppBar style={{background:'#000'}}>
        Hello
      </AppBar>
      )
    }
}

export default Header;

अब इस घटक के बाहर से आप नीचे इस तरह कह सकते हैं

window.helloComponent.alertMessage();

Question 4

मैंने कुछ इस तरह किया है:

class Cow extends React.Component {

    constructor (props) {
        super(props);
        this.state = {text: 'hello'};
    }

    componentDidMount () {
        if (this.props.onMounted) {
            this.props.onMounted({
                say: text => this.say(text)
            });
        }
    }

    render () {
        return (
            <pre>
                 ___________________
                < {this.state.text} >
                 -------------------
                        \   ^__^
                         \  (oo)\_______
                            (__)\       )\/\
                                ||----w |
                                ||     ||
            </pre>
        );
    }

    say (text) {
        this.setState({text: text});
    }

}

और फिर कहीं और:

class Pasture extends React.Component {

    render () {
        return (
            <div>
                <Cow onMounted={callbacks => this.cowMounted(callbacks)} />
                <button onClick={() => this.changeCow()} />
            </div>
        );
    }

    cowMounted (callbacks) {
        this.cowCallbacks = callbacks;
    }

    changeCow () {
        this.cowCallbacks.say('moo');
    }

}

मैंने इस सटीक कोड का परीक्षण नहीं किया है, लेकिन यह इस बात की तर्ज पर है कि मैंने अपनी एक परियोजना में क्या किया है और यह अच्छी तरह से काम करता है :)। बेशक यह एक बुरा उदाहरण है, आपको बस इसके लिए प्रॉपर का उपयोग करना चाहिए, लेकिन मेरे मामले में उप-घटक ने एक एपीआई कॉल किया था जिसे मैं उस घटक के अंदर रखना चाहता था। ऐसे में यह एक अच्छा उपाय है।

Question 5

renderसंभावित रूप से लौटाए गए मूल्य को दर्शाते हुए विधि के साथ , अनुशंसित दृष्टिकोण अब मूल तत्व को कॉलबैक रेफरी संलग्न करना है। इस कदर:

ReactDOM.render( <Hello name="World" ref={(element) => {window.helloComponent = element}}/>, document.getElementById('container'));

जिसके बाद हम window.helloComponent का उपयोग करके एक्सेस कर सकते हैं, और इसके किसी भी तरीके को window.helloComponent.METHOD से एक्सेस किया जा सकता है।

यहाँ एक पूर्ण उदाहरण है:

var onButtonClick = function() {
  window.helloComponent.alertMessage();
}

class Hello extends React.Component {
  alertMessage() {
    alert(this.props.name);
  }

  render() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
};

ReactDOM.render( <Hello name="World" ref={(element) => {window.helloComponent = element}}/>, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>
<button onclick="onButtonClick()">Click me!</button>

स्निपेट का विस्तार करें

Question 6

class AppProvider extends Component {
  constructor() {
    super();

    window.alertMessage = this.alertMessage.bind(this);
  }

  alertMessage() {
    console.log('Hello World');
 }
}

आप इस विधि का उपयोग करके विंडो से कॉल कर सकते हैं window.alertMessage()।

Question 7

यदि आप ईएस 6 में हैं तो अपने उदाहरण पर अपनी विधि पर "स्थिर" कीवर्ड का उपयोग करें: static alertMessage: function() { ... },

आशा है कि वहाँ किसी की मदद कर सकते हैं :)

Question 8

आप onClickफ़ंक्शन के साथ div में एक हैंडलर जोड़ सकते हैं ( onClickयह React का अपना कार्यान्वयन है onClick) और आप { }घुंघराले ब्रेसिज़ के भीतर संपत्ति तक पहुंच सकते हैं , और आपका अलर्ट संदेश दिखाई देगा।

मामले में आप स्टैटिक विधियों को परिभाषित करना चाहते हैं जिन्हें घटक वर्ग पर बुलाया जा सकता है - आपको स्टैटिक्स का उपयोग करना चाहिए। हालांकि:

"इस ब्लॉक के भीतर परिभाषित तरीके स्थिर हैं, जिसका अर्थ है कि आप उन्हें किसी भी घटक इंस्टेंसेस के बनने से पहले चला सकते हैं, और विधियों में आपके घटकों की प्रॉप्स या स्थिति तक पहुंच नहीं है। यदि आप स्थैतिक में प्रॉप्स के मूल्य की जांच करना चाहते हैं। विधि, स्थिर विधि के तर्क के रूप में प्रॉपर में कॉलर पास है। " ( स्रोत )

कुछ उदाहरण कोड:

    const Hello = React.createClass({

        /*
            The statics object allows you to define static methods that can be called on the component class. For example:
        */
        statics: {
            customMethod: function(foo) {
              return foo === 'bar';
            }
        },


        alertMessage: function() {
            alert(this.props.name);                             
        },

        render: function () {
            return (
                <div onClick={this.alertMessage}>
                Hello {this.props.name}
                </div>
            );
        }
    });

    React.render(<Hello name={'aworld'} />, document.body);

आशा है कि यह आपकी थोड़ी मदद करता है, क्योंकि मुझे नहीं पता कि क्या मैं आपके प्रश्न को सही ढंग से समझ पाया हूं, इसलिए यदि मैंने इसे गलत समझा तो मुझे सही कर लें :)

Question 9

ऐसा प्रतीत होता है कि स्टैटिक्स पदावनत हो गए हैं, और कुछ कार्यों को उजागर करने के अन्य तरीके renderजटिल प्रतीत होते हैं। इस बीच, स्टैक ओवरफ्लो ने डीबगिंग रिएक्ट के बारे में जवाब दिया , जबकि हैक-वाई लगता है, मेरे लिए काम किया।

Question 10

विधि 1 using ChildRef :

public childRef: any = React.createRef<Hello>();

public onButtonClick= () => {
    console.log(this.childRef.current); // this will have your child reference
}

<Hello ref = { this.childRef }/>
<button onclick="onButtonClick()">Click me!</button>

विधि 2: using window register

public onButtonClick= () => {
    console.log(window.yourRef); // this will have your child reference
}

<Hello ref = { (ref) => {window.yourRef = ref} }/>`
<button onclick="onButtonClick()">Click me!</button>

Question 11

साथ में `React hook - useRef`



const MyComponent = ({myRef}) => {
  const handleClick = () => alert('hello world')
  myRef.current.handleClick = handleClick
  return (<button onClick={handleClick}>Original Button</button>)
}

MyComponent.defaultProps = {
  myRef: {current: {}}
}

const MyParentComponent = () => {
  const myRef = React.useRef({})
  return (
    <>
      <MyComponent 
        myRef={myRef}
      />
      <button onClick={myRef.curent.handleClick}>
        Additional Button
      </button>
    </>
  )
}

शुभ लाभ...

Question 12

मैं घटकों को प्रस्तुत करने और एक घटक उदाहरण वापस करने के लिए इस सहायक विधि का उपयोग करता हूं। तरीकों को उस उदाहरण पर बुलाया जा सकता है।

static async renderComponentAt(componentClass, props, parentElementId){
         let componentId = props.id;
        if(!componentId){
            throw Error('Component has no id property. Please include id:"...xyz..." to component properties.');
        }

        let parentElement = document.getElementById(parentElementId);

        return await new Promise((resolve, reject) => {
            props.ref = (component)=>{
                resolve(component);
            };
            let element = React.createElement(componentClass, props, null);
            ReactDOM.render(element, parentElement);
        });
    }

बाहर से एक प्रतिक्रिया घटक विधि को बुलाओ

उदाहरण

स्थिर

साथ में React hook - useRef

साथ में `React hook - useRef`