বাইরে থেকে একটি প্রতিক্রিয়া উপাদান পদ্ধতি কল করুন

Question 1

আমি প্রতিক্রিয়া উপাদানটির দ্বারা প্রতিক্রিয়া উপাদান দ্বারা প্রকাশিত কোনও পদ্ধতিতে কল করতে চাই।

উদাহরণস্বরূপ, এই jsfiddle মধ্যে । আমি alertMessageপদ্ধতিটি HelloElementরেফারেন্স থেকে কল করতে চাই ।

অতিরিক্ত মোড়ক না লিখে এ অর্জনের কি উপায় আছে?

সম্পাদনা করুন (জেএসফিডাল থেকে অনুলিপি কোড)

<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। নিচে দেখ.

স্থির

রিএ্যাকটিজেএস স্ট্যাটিক্সটি একবার দেখুন । দ্রষ্টব্য, তবে, কোনও স্থির ফাংশন উদাহরণ-স্তরের ডেটা অ্যাক্সেস করতে পারে না, তাই 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');
    }

}

আমি এই সঠিক কোডটি পরীক্ষা করি নি, তবে এটি আমার একটি প্রকল্পে আমি যা করেছি তার লাইনের সাথে রয়েছে এবং এটি দুর্দান্তভাবে কাজ করে :) :) অবশ্যই এটি একটি খারাপ উদাহরণ, আপনার কেবল প্রপস ব্যবহার করা উচিত, তবে আমার ক্ষেত্রে সাব-উপাদানটি একটি এপিআই কল করেছিল যা আমি সেই উপাদানটির ভিতরে রাখতে চেয়েছিলাম to সেক্ষেত্রে এটি একটি দুর্দান্ত সমাধান।

Question 5

সঙ্গে renderপদ্ধতি সম্ভাব্য ফিরে মান বিনয়ী, প্রস্তাবিত পদ্ধতির মূল উপাদান করার জন্য একটি কলব্যাক সুত্র সংযুক্ত করতে এখন হয়। এটার মত:

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

যার পরে আমরা উইন্ডো.হেলো কম্পোনেন্ট ব্যবহার করে অ্যাক্সেস করতে পারি এবং এর যে কোনও পদ্ধতিতে উইন্ডো.হেলো কম্পোনেন্ট.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

আপনি যদি ES6 এ থাকেন তবে আপনার উদাহরণ থেকে আপনার পদ্ধতিতে "স্থিতিক" কীওয়ার্ডটি ব্যবহার করুন নিম্নলিখিতটি হবে: static alertMessage: function() { ... },

আশা করি যে কেউ এখানে সাহায্য করতে পারে :)

Question 8

সঙ্গে `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.current.handleClick}>
        Additional Button
      </button>
    </>
  )
}

শুভকামনা ...

Question 9

আপনি কেবলমাত্র onClickফাংশনটির সাথে ডিভিতে একটি হ্যান্ডলার যুক্ত করতে পারেন ( onClickএটি তার নিজস্ব বাস্তবায়নের onClick) এবং আপনি এর মধ্যে সম্পত্তি অ্যাক্সেস করতে পারেন{ } কোঁকড়া ধনুর্বন্ধনী , এবং আপনার সতর্কতা বার্তা প্রদর্শিত হবে।

যদি আপনি স্থিতিশীল পদ্ধতিগুলি সংজ্ঞায়িত করতে চান যা উপাদান শ্রেণিতে কল করা যায় - আপনার স্ট্যাটিক্স ব্যবহার করা উচিত। যদিও:

"এই ব্লকের মধ্যে সংজ্ঞায়িত পদ্ধতিগুলি স্থিতিশীল, এর অর্থ যে কোনও উপাদান উপাদান তৈরি হওয়ার আগে আপনি এগুলি চালাতে পারবেন এবং পদ্ধতিগুলি আপনার উপাদানগুলির প্রপস বা অবস্থানে অ্যাক্সেস পাবে না If আপনি যদি একটি স্ট্যাটিকের প্রপসের মান পরীক্ষা করতে চান পদ্ধতি, স্থির পদ্ধতির যুক্তি হিসাবে কলগুলিকে প্রপসগুলিতে পাস করুন। ( উত্স )

কিছু উদাহরণ কোড:

    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 10

এটি প্রদর্শিত হয় যে স্ট্যাটিকগুলি হ্রাস করা হয়, এবং কিছু ফাংশন প্রকাশের অন্যান্য পদ্ধতিগুলি renderগুলিয়ে যায় বলে মনে হয়। ইতিমধ্যে, ডিবাগিংয়ের বিষয়ে এই স্ট্যাক ওভারফ্লো উত্তরটি হ্যাক- ওয়াইয়ের সময় মনে হচ্ছে, আমার পক্ষে কাজটি করেছে।

Question 11

পদ্ধতি 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 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`