পিতামাতার কাছ থেকে সন্তানের পদ্ধতি কল করুন

Question

আমার দুটি উপাদান রয়েছে।

1. মূল উপাদান
2. শিশু উপাদান

আমি প্যারেন্টের কাছ থেকে সন্তানের পদ্ধতিটি কল করার চেষ্টা করছিলাম, আমি এইভাবে চেষ্টা করেছি তবে ফল পাওয়া যায়নি

class Parent extends Component {
  render() {
    return (
      <Child>
        <button onClick={Child.getAlert()}>Click</button>
      </Child>
      );
    }
  }

class Child extends Component {
  getAlert() {
    alert('clicked');
  }

  render() {
    return (
      <h1 ref="hello">Hello</h1>
    );
  }
}

পিতামাতার কাছ থেকে সন্তানের পদ্ধতিটি কল করার কোনও উপায় আছে কি?

দ্রষ্টব্য: শিশু এবং অভিভাবক উপাদান দুটি পৃথক ফাইলে রয়েছে

Comments

যদিও আমি এই বিষয়ে খুব দেরী করেছি, আমি প্রতিক্রিয়াও শিখছি তাই আমি যে মামলায় পিতা-মাতার সন্তানের পদ্ধতিটি কল করতে হবে তার সম্পর্কে জানতে চাই। আপনি দয়া করে ব্যাখ্যা করবেন?

— অক্ষয় রাউত

তীর ফাংশন থেকে যে কেউ এটি জানেন? stackoverflow.com/questions/60015693/...

— টমাস Segato

@ অক্ষয়রৌত আইএমও একটি ভাল ব্যবহারের ক্ষেত্রে: রিসেট এবং ফাংশন জমা দেওয়ার একটি সাধারণ উদ্দেশ্য ফর্ম, যার পরে ফর্মের মানগুলি ফেরত দেয়।

— জুলিয়ান কে

Answer 1

প্রথমে, আমি প্রকাশ করতে পারি যে এটি সাধারণত প্রতিক্রিয়া জমি জিনিস নিয়ে যাওয়ার উপায় নয় । সাধারণত আপনি যা করতে চান তা হ'ল প্রসগুলিতে বাচ্চাদের কার্যকারিতা সরিয়ে দেওয়া এবং ইভেন্টগুলিতে বাচ্চাদের কাছ থেকে বিজ্ঞপ্তিগুলি (বা এখনও আরও ভাল dispatch:) পাস করা ।

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

পূর্বে, রেফগুলি কেবল ক্লাস-ভিত্তিক উপাদানগুলির জন্য সমর্থিত ছিল। রিঅ্যাক্ট হুকের আবির্ভাবের সাথে , এখন আর সেটি নেই

হুকস এবং ফাংশন উপাদানগুলি ব্যবহার করে ( >= react@16.8)

const { forwardRef, useRef, useImperativeHandle } = React;

// We need to wrap component in `forwardRef` in order to gain
// access to the ref object that is assigned using the `ref` prop.
// This ref is passed as the second parameter to the function component.
const Child = forwardRef((props, ref) => {

  // The component instance will be extended
  // with whatever you return from the callback passed
  // as the second argument
  useImperativeHandle(ref, () => ({

    getAlert() {
      alert("getAlert from Child");
    }

  }));

  return <h1>Hi</h1>;
});

const Parent = () => {
  // In order to gain access to the child component instance,
  // you need to assign it to a `ref`, so we call `useRef()` to get one
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.getAlert()}>Click</button>
    </div>
  );
};

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<div id="root"></div>

জন্য ডকুমেন্টেশন useImperativeHandle()হয় এখানে :

useImperativeHandleযখন ব্যবহারের সময় পিতামাতার উপাদানগুলির সংস্পর্শে আসে সেই মানটিকে স্বনির্ধারণ করে ref।

ক্লাস উপাদান ব্যবহার করে ( >= react@16.4)

const { Component } = React;

class Parent extends Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
  }

  onClick = () => {
    this.child.current.getAlert();
  };

  render() {
    return (
      <div>
        <Child ref={this.child} />
        <button onClick={this.onClick}>Click</button>
      </div>
    );
  }
}

class Child extends Component {
  getAlert() {
    alert('getAlert from Child');
  }

  render() {
    return <h1>Hello</h1>;
  }
}

ReactDOM.render(<Parent />, document.getElementById('root'));

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="root"></div>

লিগ্যাসি এপিআই ( <= react@16.3)

Purposesতিহাসিক উদ্দেশ্যে, কলব্যাক-ভিত্তিক স্টাইলটি আপনি 16.3 এর আগে প্রতিক্রিয়া সংস্করণগুলির সাথে ব্যবহার করবেন:

const { Component } = React;
const { render } = ReactDOM;

class Parent extends Component {
  render() {
    return (
      <div>
        <Child ref={instance => { this.child = instance; }} />
        <button onClick={() => { this.child.getAlert(); }}>Click</button>
      </div>
    );
  }
}

class Child extends Component {
  getAlert() {
    alert('clicked');
  }

  render() {
    return (
      <h1>Hello</h1>
    );
  }
}


render(
  <Parent />,
  document.getElementById('app')
);

<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="app"></div>

Comments

আমি ক্লান্ত হয়ে পড়েছি তবে এই ত্রুটিটি শেষ করে "_this2.refs.child.getAlert কোনও ফাংশন নয়"

— N8FURY

এটি কারণ connectএকটি উচ্চতর অর্ডার উপাদান দেয় যা আপনার আসল দৃষ্টান্তটি মোড়বে। getWrappedInstance()আপনার আসল উপাদানটি পেতে আপনাকে প্রথমে সংযুক্ত উপাদানটিতে কল করতে হবে। তারপরে আপনি এটিতে উদাহরণ পদ্ধতিগুলি কল করতে পারেন।

— রসপিডিয়া

এটি সত্যই ভাল প্যাটার্ন নয়। স্ট্রিং রেফগুলি উল্লেখ করা উচিত নয় upon সন্তানের উপাদানগুলির মধ্যে প্রপসগুলি উত্তীর্ণ করা ভাল এবং তারপরে পিতামাতার একটি বাটন ক্লিক করে পিতামাতার অবস্থা পরিবর্তন করুন, এবং একটি রাষ্ট্রীয় আইটেমটি সন্তানের মধ্যে প্রেরণ করুন এবং এটি ট্রিগার componentWillReceivePropsহিসাবে ব্যবহার করুন।

— ffxsam

না, এটি সাধারণত সেরা প্যাটার্ন নয়, যখন আপনার প্রয়োজন হয় এটি পালানোর হ্যাচ বেশি হয় এবং শুধুমাত্র জরুরী পরিস্থিতিতে ব্যবহার করা উচিত। এছাড়াও, এই উত্তরটি তখনই লেখা হয়েছিল যখন স্ট্রিং রেফগুলি তখনও ছিল এবং আপনি ঠিক বলেছেন যে তারা আজকাল কাজ করার "সঠিক" উপায় নয়।

— রসপিডিয়া

সেরা অনুশীলন যদি কোনও শিশু উপাদানটির পদ্ধতি কল করার মতো সহজ কিছু করার জন্য যুক্তির এক ধাঁধা তৈরি করা হয় - তবে আমি সেরা অনুশীলনের সাথে একমত নই।

— আআআআআআআআআআআআআ

Answer 2

আপনি এখানে অন্য প্যাটার্ন ব্যবহার করতে পারেন:

class Parent extends Component {
 render() {
  return (
    <div>
      <Child setClick={click => this.clickChild = click}/>
      <button onClick={() => this.clickChild()}>Click</button>
    </div>
  );
 }
}

class Child extends Component {
 constructor(props) {
    super(props);
    this.getAlert = this.getAlert.bind(this);
 }
 componentDidMount() {
    this.props.setClick(this.getAlert);
 }
 getAlert() {
    alert('clicked');
 }
 render() {
  return (
    <h1 ref="hello">Hello</h1>
  );
 }
}

এটি যা করে তা হ'ল clickChildসন্তানের মাউন্ট করার সময় পিতামাতার পদ্ধতিটি সেট করা। আপনি যখন পিতামাতার বোতামটি ক্লিক করেন তখন এটি কল করবে clickChildযা সন্তানের কল করে getAlert।

আপনার বাচ্চাটি মোড়ানো থাকলে connect()এটি getWrappedInstance()হ্যাকের প্রয়োজন না হয় এটিও কাজ করে ।

নোট আপনি onClick={this.clickChild}পিতামাত্রে ব্যবহার করতে পারবেন না কারণ পিতামাতার যখন রেন্ডার করা হয় তখন বাচ্চা মাউন্ট this.clickChildহয় না তাই এখনও নিয়োগ করা হয় নি। ব্যবহার onClick={() => this.clickChild()}করা ঠিক আছে কারণ আপনি যখন বোতামটি ক্লিক করবেন তখনই this.clickChildইতিমধ্যে বরাদ্দ করা উচিত।

Comments

_this2.clickChild is not a functionকেন পাব ?

— tatsu

: কিছু মনে করবেন না এই আমার জন্য কাজ github.com/kriasoft/react-starter-kit/issues/...

— tatsu

কোনটিই কাজ করেনি। শুধুমাত্র এই উত্তরটি কাজ: github.com/kriasoft/react-starter-kit/issues/...

— tatsu

এটি একটি আকর্ষণীয় কৌশল। এটি বেশ পরিষ্কার এবং কোনও নিয়ম ভাঙা মনে হচ্ছে না। তবে আমি মনে করি আপনি যদি একটি বাঁধা যুক্ত করেন তবে আপনার উত্তরটি আরও সম্পূর্ণ হবে (এবং প্রত্যাশাগুলি পূরণ করবে)। আমি উত্তরটি এত পছন্দ করেছি যে আমি এটি সম্পর্কিত গিতুব ইস্যুতে পোস্ট করেছি ।

— জোয়েটউইডেল

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত

— যিশু গোমেজ

Answer 3

https://facebook.github.io/react/tips/expose-comp घटक-funifications.html আরও উত্তরের জন্য এখানে রেফারেন্স শিশুদের উপাদানগুলির জন্য পদ্ধতিগুলি কল করুন

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

সাধারণভাবে, প্রপসের মাধ্যমে ডেটা গাছের নিচে দিয়ে যেতে হবে। এর ব্যতিক্রম কিছু আছে (যেমন .ফোকাস () কল করা বা এককালীন অ্যানিমেশন যা সত্যই রাষ্ট্রকে "পরিবর্তন করে না" ট্রিগার করে) তবে আপনি যখনই "সেট" নামক কোনও পদ্ধতি প্রকাশ করছেন তখন প্রপসগুলি সাধারণত একটি ভাল পছন্দ। এটি তৈরি করার চেষ্টা করুন যাতে অভ্যন্তরীণ ইনপুট উপাদানটি তার আকার এবং চেহারা সম্পর্কে চিন্তিত হয় যাতে এর পূর্বপুরুষদের মধ্যে কেউই তা না করে।

Comments

এখানে এই উত্তরের উত্স: আলোচনা. reactjs.org/t/… । অন্যের উদ্ধৃতি দিয়ে কোনও সমস্যা নেই, তবে কমপক্ষে কিছু উল্লেখ করুন।

— Jodo

প্রস ছাড়াও কীভাবে এই ব্রেকটি ঠিকঠাকভাবে কাজ করে?

— টিম্ম্ম্ম

Answer 4

ব্যবহারের প্রভাব সহ বিকল্প পদ্ধতি:

মূল:

const [refresh, doRefresh] = useState(0);
<Button onClick={()=>doRefresh(refresh+1)} />
<Children refresh={refresh} />

শিশু:

useEffect(() => {
    refresh(); //children function of interest
  }, [props.refresh]);

Comments

এটির আরও বেশি ভোট পাওয়া উচিত

— আলী আল আমিন

পুনশ্চ. যদি আপনার ইচ্ছাটি কেবল ফর্মটি পুনরায় রেন্ডার করতে হয় (উদাহরণস্বরূপ, ইনপুট ক্ষেত্রগুলি পুনরায় সেট করতে) তবে আপনাকে ইউজএফেক্টটি অন্তর্ভুক্ত করার দরকার নেই, আপনি কেবল প্রপ উপাদান উপাদান পরিবর্তনতে প্রেরণ করতে পারেন

— ম্যাট ফ্লেচার

Answer 5

আমরা অন্য উপায়ে রেফ ব্যবহার করতে পারি-

আমরা একটি অভিভাবক উপাদান তৈরি করতে যাচ্ছি, এটি একটি <Child/>উপাদান রেন্ডার করবে । আপনি দেখতে পাচ্ছেন, যে উপাদানটি রেন্ডার হবে, আপনাকে রেফ বৈশিষ্ট্য যুক্ত করতে হবে এবং এর জন্য একটি নাম সরবরাহ করতে হবে।
তারপরে, triggerChildAlertপ্যারেন্ট ক্লাসে অবস্থিত ফাংশনটি এই প্রসঙ্গে রিফ সম্পত্তিটি অ্যাক্সেস করবে (যখন triggerChildAlertফাংশনটি ট্রিগার করা হবে তখন শিশু রেফারেন্সটি অ্যাক্সেস করবে এবং এতে শিশু উপাদানটির সমস্ত ফাংশন থাকবে)।

class Parent extends React.Component {
    triggerChildAlert(){
        this.refs.child.callChildMethod();
        // to get child parent returned  value-
        // this.value = this.refs.child.callChildMethod();
        // alert('Returned value- '+this.value);
    }

    render() {
        return (
            <div>
                {/* Note that you need to give a value to the ref parameter, in this case child*/}
                <Child ref="child" />
                <button onClick={this.triggerChildAlert}>Click</button>
            </div>
        );
    }
}  

এখন, তাত্ত্বিকভাবে পূর্বে নকশাকৃত শিশু উপাদানটি এর মতো দেখাবে:

class Child extends React.Component {
    callChildMethod() {
        alert('Hello World');
        // to return some value
        // return this.state.someValue;
    }

    render() {
        return (
            <h1>Hello</h1>
        );
    }
}

এখানে সোর্স কোড-
আশা আপনাকে সাহায্য করবে!

Comments

স্ট্রিং রেফগুলি হ্রাস করা হয়। reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs

— Cory McAboy

Answer 6

আপনি যদি কেবল এটির কারণেই করেন যে আপনি চান শিশুটি তার পিতামাতাকে পুনরায় ব্যবহারযোগ্য বৈশিষ্ট্য সরবরাহ করতে পারে তবে আপনি তার পরিবর্তে রেন্ডার-প্রপস ব্যবহার করে সেই বিষয়টি বিবেচনা করতে পারেন ।

সেই কৌশলটি প্রকৃতপক্ষে কাঠামোটিকে উল্টো দিকে ঘুরিয়ে দেয়। Childএখন, পিতা বা মাতা গোপন তাই আমি এটি নতুন নামকরণ হয়েছে AlertTraitকম। নামটি Parentধারাবাহিকতার জন্য রেখেছি , যদিও এখন এটি সত্যিকারের পিতামহ নয়।

// Use it like this:

  <AlertTrait renderComponent={Parent}/>


class AlertTrait extends Component {
  // You may need to bind this function, if it is stateful
  doAlert() {
    alert('clicked');
  }
  render() {
    return this.props.renderComponent(this.doAlert);
  }
}

class Parent extends Component {
  render() {
    return (
      <button onClick={this.props.doAlert}>Click</button>
    );
  }
}

এই ক্ষেত্রে, অ্যালার্টট্রেট এক বা একাধিক বৈশিষ্ট্য সরবরাহ করে যা এটি তার প্রোপগুলিতে দেওয়া হয় এমন উপাদানগুলির প্রপস হিসাবে এটি নিচে যায় renderComponent।

পিতা-মাতা প্রপস doAlertহিসাবে গ্রহণ করে এবং যখন প্রয়োজন হয় তখন এটি কল করতে পারে।

(স্পষ্টতার জন্য, আমি renderComponentউপরের উদাহরণে প্রপ কল করেছি But তবে উপরে লিঙ্কযুক্ত প্রতিক্রিয়া দস্তাবেজে তারা কেবল এটি কল করেছে render))

বৈশিষ্ট্য উপাদানটি তার রেন্ডার কার্যক্রমে পিতামাতার চারপাশে রেন্ডার করতে পারে তবে এটি পিতামাতার অভ্যন্তরে কোনও কিছুই সরবরাহ করে না। প্রকৃতপক্ষে এটি পিতামাতার ভিতরে জিনিসগুলি রেন্ডার করতে পারে, যদি এটি পিতামাতার কাছে অন্য প্রপ (উদাহরণস্বরূপ renderChild) পাস করে , যা পিতামাতার তার রেন্ডার পদ্ধতির সময় ব্যবহার করতে পারে।

এটি ওপি যা চেয়েছিল তার থেকে কিছুটা পৃথক, তবে কিছু লোক এখানেই শেষ হতে পারে (যেমনটি আমরা করেছি) কারণ তারা পুনরায় ব্যবহারযোগ্য বৈশিষ্ট্য তৈরি করতে চেয়েছিল এবং মনে করেছিল যে কোনও সন্তানের উপাদান এটি করার জন্য একটি ভাল উপায়।

Comments

পুনঃব্যবহারযোগ্য বৈশিষ্ট্যগুলি তৈরি করার জন্য নিদর্শনগুলির একটি কার্যকরী তালিকা এখানে রয়েছে: reactjs.org/blog/2016/07/13/…

— জোয়েটউইডল

যদি আপনার সমস্ত স্টপওয়াচগুলি থাকে এবং সেগুলি পুনরায় আরম্ভ করার জন্য একটি বোতাম থাকে। এখানে কীভাবে প্রপস রেন্ডার করা যায়?

— ভিসিএনসি

@vsync আমি নিশ্চিত নই যে এই পদ্ধতিটি আপনার কাজের জন্য সাহায্য করতে পারে। তবে ব্রিকিংআপের উত্তর সাহায্য করতে পারে। নোট করুন যে তারা সেট করেছে this.clickChild = clickকিন্তু আপনার একাধিক স্টপওয়াচগুলি একাধিক ফাংশন পাস করবে, সুতরাং আপনার সেগুলি সমস্ত সংরক্ষণ করতে হবে:this.watchRestartFuncs[watchId] = restartWatch

— জোয়েটউইডল

Answer 7

আপনি সহজেই এই উপায়ে এটি অর্জন করতে পারেন

Steps-

1. প্যারেন্ট ক্লাসে রাজ্যে একটি বুলিয়ান ভেরিয়েবল তৈরি করুন। আপনি যখন কোনও ফাংশন কল করতে চান এটি আপডেট করুন।
2. প্রোপ ভেরিয়েবল তৈরি করুন এবং বুলিয়ান ভেরিয়েবল বরাদ্দ করুন।

3. প্রপস ব্যবহার করে চলক সন্তানের উপাদানটি অ্যাক্সেস করুন এবং যদি কোনও শর্ত থাকে তবে আপনি যে পদ্ধতিটি চান তা চালিত করে।

   class Child extends Component {
      Method=()=>{
      --Your method body--
      }
      render() {
        return (
       //check whether the variable has been updated or not
         if(this.props.updateMethod){
           this.Method();
         }
        )
      }
   }
   
   class Parent extends Component {
   
   constructor(){
     this.state={
      callMethod:false
     }
   
   }
   render() {
      return (
   
        //update state according to your requirement
        this.setState({
           callMethod:true
        }}
        <Child updateMethod={this.state.callMethod}></Child>
       );
      }
   }

Comments

আপনি এটি স্যান্ডবক্স করতে চান। দেখে মনে হচ্ছে আপনি অসীম লুপটি শেষ করতে চলেছেন কারণ পিতামাতাকে সত্য হিসাবে সেট করা থাকার কারণে শিশু পদ্ধতি অবিচ্ছিন্নভাবে চলবে।

— আইজাক পাক

@ ইসাকাক পাক হ্যাঁ, সে কারণেই আমি সেখানে একটি মন্তব্য রেখেছিলাম, আপনার প্রয়োজন অনুসারে আপনাকে অবশ্যই রাষ্ট্র আপডেট করতে হবে। তাহলে এটি অসীম লুপ হিসাবে চলবে না।

— কুসল কিথমল

Answer 8

আমি useEffectএই সমস্ত কিছু করার মাথা ব্যথা কাটিয়ে উঠার জন্য হুক ব্যবহার করছি তাই এখন আমি এই ধরণের বাচ্চাকে এইরকম পরিবর্তন করতে পারি:

<ParentComponent>
 <ChildComponent arbitrary={value} />
</ParentComponent>
useEffect(() => callTheFunctionToBeCalled(value) , [value]);

Answer 9

আমি এখানে উপস্থাপিত কোনও সমাধানে সন্তুষ্ট নই। প্রকৃতপক্ষে একটি খুব সহজ সমাধান রয়েছে যা বেসিক প্রপস বস্তু বাদে কিছু প্রতিক্রিয়াশীলতার উপর নির্ভর না করে খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করে করা যেতে পারে - এবং এটি আপনাকে উভয় দিকের (পিতা - মাতা -> শিশু, শিশু -> পিতামাতার) যোগাযোগ করার সুবিধা দেয়। আপনার পিতামাত্ত উপাদান থেকে একটি উপাদান সন্তানের অংশে পাস করতে হবে। এই অবজেক্টটি হ'ল আমি "দ্বি-দিকনির্দেশক রেফারেন্স" বা সংক্ষেপে বিআইআরএফ হিসাবে উল্লেখ করি। মূলত, অবজেক্টটিতে পিতামাতার বিভিন্ন পদ্ধতির একটি উল্লেখ রয়েছে যা পিতামাতারা প্রকাশ করতে চান। এবং সন্তানের উপাদানটি পিতামাতাদের কল করতে পারে এমন বস্তুর সাথে পদ্ধতিগুলি সংযুক্ত করে। এটার মতো কিছু:

// Parent component.
function MyParentComponent(props) {

   function someParentFunction() {
      // The child component can call this function.
   }

   function onButtonClick() {
       // Call the function inside the child component.
       biRef.someChildFunction();
   }

   // Add all the functions here that the child can call.
   var biRef = {
      someParentFunction: someParentFunction
   }

   return <div>
       <MyChildComponent biRef={biRef} />
       <Button onClick={onButtonClick} />
   </div>;
}


// Child component
function MyChildComponent(props) {

   function someChildFunction() {
      // The parent component can call this function.
   }


   function onButtonClick() {
      // Call the parent function.
      props.biRef.someParentFunction();
   }

   // Add all the child functions to props.biRef that you want the parent
   // to be able to call.
   props.biRef.someChildFunction = someChildFunction;

   return <div>
       <Button onClick={onButtonClick} />
   </div>;
}

এই সমাধানের অন্য সুবিধাটি হ'ল আপনি কেবলমাত্র একক সম্পত্তি ব্যবহার করে পিতা-মাতার কাছ থেকে সন্তানের কাছে যাওয়ার সময় আপনি পিতামাতা এবং সন্তানের মধ্যে আরও অনেকগুলি ক্রিয়াকলাপ যুক্ত করতে পারেন।

উপরের কোডটির একটি উন্নতি হ'ল পিতামাতা ও সন্তানের ক্রিয়াকলাপগুলি সরাসরি বিআরএফ অবজেক্টে যুক্ত না করে বরং সাব সদস্যদের যোগ করা। প্যারেন্ট ফাংশনগুলি "প্যারেন্ট" নামে একটি সদস্যের সাথে যুক্ত করা উচিত এবং শিশু ফাংশনগুলি "শিশু" নামে একটি সদস্যের সাথে যুক্ত করা উচিত।

// Parent component.
function MyParentComponent(props) {

   function someParentFunction() {
      // The child component can call this function.
   }

   function onButtonClick() {
       // Call the function inside the child component.
       biRef.child.someChildFunction();
   }

   // Add all the functions here that the child can call.
   var biRef = {
      parent: {
          someParentFunction: someParentFunction
      }
   }

   return <div>
       <MyChildComponent biRef={biRef} />
       <Button onClick={onButtonClick} />
   </div>;
}


// Child component
function MyChildComponent(props) {

   function someChildFunction() {
      // The parent component can call this function.
   }


   function onButtonClick() {
      // Call the parent function.
      props.biRef.parent.someParentFunction();
   }

   // Add all the child functions to props.biRef that you want the parent
   // to be able to call.
   props.biRef {
       child: {
            someChildFunction: someChildFunction
       }
   }

   return <div>
       <Button onClick={onButtonClick} />
   </div>;
}

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

একটি সর্বশেষ বিষয় হ'ল যদি আপনি লক্ষ্য করেন তবে পিতামণ্ডল উপাদানটি বিআরএফ অবজেক্ট তৈরি করে যেখানে সন্তানের উপাদানগুলি প্রপস অবজেক্টের মাধ্যমে এটি অ্যাক্সেস করে। পিতামাতার মধ্যে biRef অবজেক্টটি সংজ্ঞায়িত না করা এবং তার নিজস্ব প্রসেস প্যারামিটারের মাধ্যমে এটি তার পিতা-মাতার কাছ থেকে অ্যাক্সেস না করার জন্য লোভনীয় হতে পারে (এটি ইউআই উপাদানগুলির শ্রেণিবিন্যাসের ক্ষেত্রে হতে পারে)। এটি ঝুঁকিপূর্ণ কারণ শিশুটি ভাবতে পারে যে কোনও ফাংশন এটি পিতামাতার কাছে কল করছে এটি পিতামাতার অন্তর্ভুক্ত যখন এটি প্রকৃতপক্ষে কোনও পিতামাতার অন্তর্ভুক্ত। যতক্ষণ না আপনি এটি সম্পর্কে অবগত হন ততক্ষণ এটিতে কোনও ভুল নেই। আপনার পিতামাতার / সন্তানের সম্পর্কের বাইরে কিছু স্তরবিন্যাসকে সমর্থন করার কারণ না থাকলে আপনার পিতামাতার অংশে বায়ারফ তৈরি করা ভাল।

Answer 10

আপনি উত্তরাধিকার ইনভার্সন করতে পারেন (এটি এখানে দেখুন: https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e )। এইভাবে আপনার যে উপাদানটি মোড়ানো হবে তার উদাহরণটিতে অ্যাক্সেস রয়েছে (সুতরাং আপনি এর কার্যাদি অ্যাক্সেস করতে সক্ষম হবেন)

Answer 11

আমি মনে করি যে পদ্ধতিগুলি কল করার সর্বাধিক প্রাথমিক উপায় হ'ল সন্তানের উপাদানটিতে একটি অনুরোধ সেট করা। তারপরে বাচ্চা অনুরোধটি পরিচালনা করার সাথে সাথে অনুরোধটি পুনরায় সেট করার জন্য এটি কলব্যাক পদ্ধতিতে কল করে।

পুনরায় সেট করার পদ্ধতিটি একে অপরের পরে একই অনুরোধটি একাধিকবার প্রেরণ করতে সক্ষম হওয়া প্রয়োজন।

প্যারেন্ট উপাদানগুলিতে

পিতামাতার রেন্ডার পদ্ধতিতে:

const { request } = this.state;
return (<Child request={request} onRequestHandled={()->resetRequest()}/>);

2 সন্তানের সাথে তার সন্তানের সাথে যোগাযোগের জন্য পিতামাতার 2 টি পদ্ধতি প্রয়োজন।

sendRequest() {
  const request = { param: "value" };
  this.setState({ request });
}

resetRequest() {
  const request = null;
  this.setState({ request });
}

শিশু উপাদান

প্রপস থেকে অনুরোধটি অনুলিপি করে শিশুটি তার অভ্যন্তরীণ অবস্থা আপডেট করে।

constructor(props) {
  super(props);
  const { request } = props;
  this.state = { request };
}

static getDerivedStateFromProps(props, state) {
  const { request } = props;
  if (request !== state.request ) return { request };
  return null;
}

তারপরে অবশেষে এটি অনুরোধটি পরিচালনা করে এবং পিতামাতার কাছে রিসেটটি প্রেরণ করে:

componentDidMount() {
  const { request } = this.state;
  // todo handle request.

  const { onRequestHandled } = this.props;
  if (onRequestHandled != null) onRequestHandled();
}

Answer 12

সন্তানের ক্রিয়াকলাপটি বাবা-মায়ের কাছ থেকে ট্রিগার করার আরেকটি উপায় হ'ল শিশু উপাদানটিতে ফাংশনটি ব্যবহার করা componentDidUpdate। আমি triggerChildFuncপ্যারেন্ট টু চাইল্ডের কাছ থেকে একটি প্রস্তাব পাস করি , যা প্রাথমিকভাবে null। বোতামটি ক্লিক করা হলে একটি ফাংশনে মান পরিবর্তন হয় এবং চাইল্ড লক্ষ্য করে যে পরিবর্তিত হয় componentDidUpdateএবং তার নিজস্ব অভ্যন্তরীণ ফাংশনটি কল করে।

প্রোপ triggerChildFuncকোনও ফাংশনে পরিবর্তিত হওয়ায় আমরা পিতামাতার কাছে একটি কলব্যাকও পাই। মূল ফাংশন মান বলা হয় যখন জানা প্রয়োজন না থাকে তাহলে triggerChildFuncথেকে উদাহরণ পরিবর্তনের জন্য পারা nullকরার trueপরিবর্তে।

const { Component } = React;
const { render } = ReactDOM;

class Parent extends Component {
  state = {
    triggerFunc: null
  }

  render() {
    return (
      <div>
        <Child triggerChildFunc={this.state.triggerFunc} />
        <button onClick={() => {
          this.setState({ triggerFunc: () => alert('Callback in parent')})
        }}>Click
        </button>
      </div>
    );
  }
}

class Child extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.triggerChildFunc !== prevProps.triggerChildFunc) {
      this.onParentTrigger();
    }
  }

  onParentTrigger() {
    alert('parent triggered me');

    // Let's call the passed variable from parent if it's a function
    if (this.props.triggerChildFunc && {}.toString.call(this.props.triggerChildFunc) === '[object Function]') {
      this.props.triggerChildFunc();
    }
  }

  render() {
    return (
      <h1>Hello</h1>
    );
  }
}


render(
  <Parent />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='app'></div>

কোডপেন: https://codepen.io/calsal/pen/NWPxbJv?editors=1010

Answer 13

এখানে আমার ডেমো: https://stackblitz.com/edit/react-dgz1ee?file=styles.css

আমি useEffectবাচ্চাদের উপাদানগুলির পদ্ধতিগুলি কল করতে ব্যবহার করছি । আমি চেষ্টা করেছি Proxy and Setter_Getterতবে useEffectখুব বেশি মনে হচ্ছে পিতামাতার কাছ থেকে কোনও শিশু পদ্ধতি কল করার পক্ষে আরও সুবিধাজনক উপায়। Proxy and Setter_Getterএটি ব্যবহার করার জন্য মনে হয় প্রথমে কাটিয়ে উঠতে কিছু সূক্ষ্মতা রয়েছে, কারণ প্রথমত সরবরাহ করা উপাদানটি ref.current return => <div/>এর নির্দিষ্টতার মাধ্যমে কোনও অবজেক্ট লাইকের উপাদান । সম্পর্কিত useEffect, আপনি বাচ্চাদের সাথে কী করতে চান তার উপর নির্ভর করে পিতামাতার রাজ্যটি নির্ধারণ করতে এই পদ্ধতির উপরও দক্ষতা অর্জন করতে পারেন।

আমি যে ডেমোটির লিঙ্কটি দিয়েছি তাতে আপনি আমার ড্রেফটওয়ার্কের সাথে আমার সম্পূর্ণ রিঅ্যাকটিজেএস কোডটি পেয়ে যাবেন যাতে আপনি আমার সমাধানটির কর্মপ্রবাহের প্রশংসা করতে পারেন।

এখানে আমি আপনাকে কেবলমাত্র প্রাসঙ্গিক কোড দিয়ে আমার রিএ্যাকটিজেএস-এর স্নিপেট সরবরাহ করছি। :

import React, {
  Component,
  createRef,
  forwardRef,
  useState,
  useEffect
} from "react"; 

{...}

// Child component
// I am defining here a forwardRef's element to get the Child's methods from the parent
// through the ref's element.
let Child = forwardRef((props, ref) => {
  // I am fetching the parent's method here
  // that allows me to connect the parent and the child's components
  let { validateChildren } = props;
  // I am initializing the state of the children
  // good if we can even leverage on the functional children's state
  let initialState = {
    one: "hello world",
    two: () => {
      console.log("I am accessing child method from parent :].");
      return "child method achieve";
    }
  };
  // useState initialization
  const [componentState, setComponentState] = useState(initialState);
  // useEffect will allow me to communicate with the parent
  // through a lifecycle data flow
  useEffect(() => {
    ref.current = { componentState };
    validateChildren(ref.current.componentState.two);
  });

{...}

});

{...}

// Parent component
class App extends Component {
  // initialize the ref inside the constructor element
  constructor(props) {
    super(props);
    this.childRef = createRef();
  }

  // I am implementing a parent's method
  // in child useEffect's method
  validateChildren = childrenMethod => {
    // access children method from parent
    childrenMethod();
    // or signaling children is ready
    console.log("children active");
  };

{...}
render(){
       return (
          {
            // I am referencing the children
            // also I am implementing the parent logic connector's function
            // in the child, here => this.validateChildren's function
          }
          <Child ref={this.childRef} validateChildren={this.validateChildren} />
        </div>
       )
}

Answer 14

আমরা যে কাস্টম হুককে ডাকি তাতে আমরা খুশি useCounterKey। এটি কেবল একটি কাউন্টারকি বা একটি কী সেট করে যা শূন্য থেকে গুনে থাকে। এটি ফাংশনটি ফিরিয়ে দেয় কীটি (যেমন বৃদ্ধি) পুনরায় সেট করে। (আমি বিশ্বাস করি এটি প্রতিক্রিয়াটির মধ্যে সবচেয়ে মূর্তিমান উপায় কোনও উপাদান পুনরায় সেট করার জন্য - কেবল কীটি ধাক্কা।

তবে এই হুকটি এমন কোনও পরিস্থিতিতেও কাজ করে যেখানে আপনি ক্লায়েন্টকে কিছু করার জন্য এককালীন বার্তা পাঠাতে চান। উদাহরণস্বরূপ আমরা নির্দিষ্ট প্যারেন্ট ইভেন্টে সন্তানের নিয়ন্ত্রণ নিয়ন্ত্রণ করতে এটি ব্যবহার করি - এটি কীটি আপডেট হওয়ার পরে কেবল অটোফোকাস করে। (যদি আরও প্রপস প্রয়োজন হয় তবে কীটি পুনরায় সেট করার আগে সেগুলি সেট করা যেতে পারে যাতে ইভেন্টটি ঘটে গেলে তারা উপলব্ধ থাকে))

এই পদ্ধতিটিতে কিছুটা লার্নিং কার্ভ রয়েছে বি / সি এটি সাধারণ ইভেন্ট হ্যান্ডলারের মতো সোজা নয়, তবে এটি পাওয়া যায় এমন প্রতিক্রিয়ার মধ্যে এটি হ্যান্ডেল করার সবচেয়ে বুদ্ধিমান উপায় বলে মনে হয় (যেহেতু কীগুলি ইতিমধ্যে এভাবে কাজ করে)। এই পদ্ধতিতে প্রতিক্রিয়া জানাতে ডিফ খুলুন তবে এটি ভালভাবে কাজ করছে!

// Main helper hook:
export function useCounterKey() {
  const [key, setKey] = useState(0);
  return [key, () => setKey(prev => prev + 1)] as const;
}

নমুনা ব্যবহারসমূহ:

// Sample 1 - normal React, just reset a control by changing Key on demand
function Sample1() {
  const [inputLineCounterKey, resetInputLine] = useCounterKey();

  return <>
    <InputLine key={inputLineCounterKey} />
    <button onClick={() => resetInputLine()} />
  <>;
}

// Second sample - anytime the counterKey is incremented, child calls focus() on the input
function Sample2() {
  const [amountFocusCounterKey, focusAmountInput] = useCounterKey();

  // ... call focusAmountInput in some hook or event handler as needed

  return <WorkoutAmountInput focusCounterKey={amountFocusCounterKey} />
}

function WorkoutAmountInput(props) {
  useEffect(() => {
    if (counterKey > 0) {
      // Don't focus initially
      focusAmount();
    }
  }, [counterKey]);

  // ...
}

( কাউন্টারকি কী ধারণার জন্য কেন্ট ডড্ডসকে ক্রেডিট )

Answer 15

এখানে একটি বাগ আছে? সন্ধানের জন্য: আমি ফরোয়ার্ড রেফ, ইউজারিফ, ইউজিমিপ্রেটিভ হ্যান্ডেল ব্যবহার করে রসপিডিয়া সমাধানের সাথে একমত

অনলাইনে কিছু ভুল তথ্য রয়েছে যা বলে যে রেফগুলি কেবল প্রতিক্রিয়া শ্রেণি উপাদানগুলি থেকে তৈরি করা যেতে পারে, তবে আপনি যদি উপরে বর্ণিত হুকগুলি উপরে ব্যবহার করেন তবে আপনি প্রকৃতপক্ষে ফাংশন উপাদানগুলি ব্যবহার করতে পারেন। একটি দ্রষ্টব্য, উপাদানটি রফতানির সময় আমি রৌটার () এর সাথে ফাইলটি না ব্যবহার করার জন্য ফাইলটি পরিবর্তন করার পরে হুকগুলি কেবল আমার জন্য কাজ করেছিল। অর্থাত্ একটি পরিবর্তন

export default withRouter(TableConfig);

পরিবর্তে হতে

export default TableConfig;

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