অভিভাবক নোডগুলির সাথে যোগাযোগের জন্য কাস্টম ইভেন্টগুলি প্রতিক্রিয়া জানায় j

Question 1

CustomEventপ্যারেন্ট নোডগুলিতে যোগাযোগ করার জন্য আমি সাধারণ DOM এর জন্য তৈরি এবং শুনছি :

সন্তানের মধ্যে:

  var moveEvent = new CustomEvent('the-graph-group-move', { 
    detail: {
      nodes: this.props.nodes,
      x: deltaX,
      y: deltaY
    },
    bubbles: true
  });
  this.getDOMNode().dispatchEvent(moveEvent);

পিতামাতায়:

componentDidMount: function () {
  this.getDOMNode().addEventListener("the-graph-group-move", this.moveGroup);
},

এটি কাজ করে, তবে এমন কোনও প্রতিক্রিয়া-নির্দিষ্ট উপায় কি আরও ভাল হবে?

Question 2

উপরে উল্লিখিত:

প্রতিক্রিয়া উপায় হ'ল কলব্যাকগুলি বাচ্চাদের কাছে প্রপসগুলির মাধ্যমে স্পষ্টভাবে পাঠানো -। প্রতিক্রিয়া কাস্টম ইভেন্ট ডাব্লু / বুদবুদ জন্য কোন সমর্থন নেই।

প্রতিক্রিয়াশীল প্রোগ্রামিং বিমূর্তিটি অরথোগোনাল:

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

প্রতিক্রিয়া দর্শনের পরিবর্তে কমান্ড প্যাটার্ন উপর ভিত্তি করে:

তথ্যসূত্র

Question 3

আপনি একটি সাধারণ পরিষেবা লিখতে পারেন এবং তারপরে এটি ব্যবহার করতে পারেন

/** eventsService */
module.exports = {
  callbacks: {},

  /**
   * @param {string} eventName
   * @param {*} data
   */
  triggerEvent(eventName, data = null) {
    if (this.callbacks[eventName]) {
      Object.keys(this.callbacks[eventName]).forEach((id) => {
        this.callbacks[eventName][id](data);
      });
    }
  },

  /**
   * @param {string} eventName name of event
   * @param {string} id callback identifier
   * @param {Function} callback
   */
  listenEvent(eventName, id, callback) {
    this.callbacks[eventName][id] = callback;
  },

  /**
   * @param {string} eventName name of event
   * @param {string} id callback identifier
   */
  unlistenEvent(eventName, id) {
    delete this.callbacks[eventName][id];
  },
};

উদাহরণ (ট্রিগার জন্য একই)

import eventsService from '../../../../services/events';
export default class FooterMenu extends Component {
  componentWillMount() {
    eventsService
      .listenEvent('cart', 'footer', this.cartUpdatedListener.bind(this));
  }

  componentWillUnmount() {
    eventsService
      .unlistenEvent('cart', 'footer');
  }

  cartUpdatedListener() {
    console.log('cart updated');
  }
}

Question 4

আপনি কলব্যাকের মাধ্যমে ঘটনাগুলি বুদ্বুদ করতে পারতেন প্রসঙ্গে উপস্থাপিত হয়ে : [কোডপেন]

import * as React from 'react';

const MyEventContext = React.createContext(() => {});

const MyEventBubbleContext = ({children, onMyEvent}) => {
  const bubbleEvent = React.useContext(MyEventContext);
  const handleMyEvent = React.useCallback((...args) => {
    // stop propagation if handler returns false
    if (onMyEvent(...args) !== false) {
      // bubble the event
      bubbleEvent(...args);
    }
  }, [onMyEvent]);
  return (
    <MyEventContext.Provider value={handleMyEvent}>
      {children}
    </MyEventContext.Provider>
  );
};

const MyComponent = () => (
  <MyEventBubbleContext onMyEvent={e => console.log('grandparent got event: ', e)}>
    <MyEventBubbleContext onMyEvent={e => console.log('parent got event: ', e)}>
      <MyEventContext.Consumer>
        {onMyEvent => <button onClick={onMyEvent}>Click me</button>}
      </MyEventContext.Consumer>
    </MyEventBubbleContext>
  </MyEventBubbleContext>
);

export default MyComponent;

Question 5

আমি আরও একটি পেয়েছি যা বেশ যুক্তিসঙ্গত পাশাপাশি বিশেষত যদি বাবা-মা থেকে বাচ্চা পর্যন্ত ছিদ্র ছিদ্র ইতিমধ্যে জটিল হয়ে ওঠে। তিনি একে কম সহজ যোগাযোগ বলেছিলেন। লিঙ্কটি এখানে:

https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/04-less-simple-communication.md

Question 6

একটি সম্ভাব্য সমাধান, যদি আপনাকে অবশ্যই অবশ্যই একটি রিএ্যাকটিজে অ্যাপ্লিকেশনটিতে পর্যবেক্ষক প্যাটার্নটি অবলম্বন করতে হয় তবে আপনি একটি সাধারণ ইভেন্ট হাইজ্যাক করতে পারেন। উদাহরণস্বরূপ, যদি আপনি মুছুন কীটি মুছে <div>ফেলার জন্য চিহ্নিত করা হয়েছে, এমন <div>একটি কীডাউন ইভেন্টের জন্য আপনি শুনতে পারেন যা একটি কাস্টম এভেন্ট দ্বারা আমন্ত্রণ জানানো হবে। শরীরে customEventকীডাউনটি ফাঁদে ফেলুন এবং নির্বাচিতগুলিতে একটি কীডাউন ইভেন্ট প্রেরণ করুন <div>। এটি কাউকে সহায়তা করে যদি ভাগ করে নেওয়া।

Question 7

সেন্ট্রাল স্টোর [রেডাক্স] যা ক্লায়েন্টদের রাজ্য বিতরণ করে, তারপরে দোকানে 'প্রেরণ' স্টেটটি ব্যাক আপ পর্যন্ত পর্যবেক্ষক বিন্যাসের মতো। প্রকাশের / সাবস্ক্রাইব করার একটি উপায় কেবল সুস্পষ্ট (ভঙ্গুর?) ওভারহেড সংযোগকারী প্রপস / ইভেন্ট পাথগুলির কারণে আরও খারাপ হয়। শ্রেণিবদ্ধ প্রতিক্রিয়ার মাধ্যমে হ্যাক করার জন্য প্রসঙ্গ (সরবরাহকারী প্যাটার্ন) বা দুর্গন্ধযুক্ত পর্যবেক্ষণযোগ্য লাইব্রেরি সরবরাহ করে। মোবিএক্সের মতো যা নতুন সজ্জিত @ অবজার্ভেবল, বা ভিউ যা নতুন টেম্পলেট সিনট্যাক্স "ভি-ইফ" প্রবর্তন করে। ইভেন্টগুলি ডিওএম এবং জাভাস্ক্রিপ্ট ইভেন্ট লুপটি যেভাবেই হোক কাজ করে, তাই কেন নয়? আমি মনে করি শয়তানবাদীরা এটি করেছিল। হাঃ হাঃ হাঃ

Question 8

আমি বুঝতে পারি এই প্রশ্নটি এখনই বেশ পুরানো, তবে এই উত্তরটি এখনও কাউকে সাহায্য করতে পারে। আমি প্রতিক্রিয়ার জন্য একটি জেএসএক্স প্রগমা লিখেছি যা ঘোষিত কাস্টম ইভেন্ট যুক্ত করে: জেএসএক্স-নেটিভ-ইভেন্টগুলি ।

মূলত আপনি onEvent<EventName>ইভেন্টগুলি দেখার জন্য কেবল প্যাটার্নটি ব্যবহার করেন ।

<some-custom-element onEventSomeEvent={ callback }></some-custom-element>