부모 노드와 통신하기 위한 react.display 사용자 지정 이벤트

부모 노드와 통신하기 위한 react.display 사용자 지정 이벤트

일반 DOM을 만들고 수신합니다.CustomEvent부모 노드에 통신하는 경우:

자:

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

이 방법은 작동하지만, 더 나은 리액트 고유의 방법이 있습니까?

상기와 같이:

리액트 방식은 소품을 통해 명시적으로 콜백을 자녀에게 전달하는 것입니다.리액트에서는 커스텀 이벤트를 지원하지 않습니다.

반응형 프로그래밍 추상화는 직교입니다.

옵저버 패턴을 사용하여 인터랙티브 시스템을 프로그래밍하는 것은 어렵고 오류가 발생하기 쉽지만 여전히 많은 프로덕션 환경에서 구현 표준입니다.우리는 반응적 프로그래밍 추상화를 위해 관찰자를 점차적으로 비호하는 접근법을 제시한다.여러 라이브러리 레이어를 통해 프로그래머는 콜백에서 보다 선언적인 프로그래밍 모델로 기존 코드를 원활하게 이행할 수 있습니다.

React 철학은 대신 명령 패턴을 기반으로 합니다.

레퍼런스

• 옵저버 패턴의 폐지
• 명령어 패턴: 명령어 이력
• 리액트 요소 및 커스텀 요소와의 컴포넌트 상호 운용
• TypeScript에서의 Redex 구축
• Mithril이 다른 프레임워크와 어떻게 다른가 - Mithril

간단한 서비스를 작성한 후 사용할 수 있습니다.

/** 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');
  }
}

컨텍스트를 통해 전달된 콜백을 통해 이벤트를 버블화할 수 있습니다.[ Code Pen ]

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;

내가 찾은 또 다른 것은 꽤 합리적인 것이다. 특히 부모에서 아이로 구멍을 뚫는 것이 이미 번거로워진다면 말이다.그는 그것을 덜 간단한 의사소통이라고 불렀다.다음은 링크입니다.

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

가능한 해결책으로 ReactJs 앱에서 Observer 패턴을 반드시 사용해야 하는 경우 일반 이벤트를 하이잭할 수 있습니다.예를 들어, 삭제 키로 인해,<div>삭제 마크가 붙어 있는 경우는,<div>customEvent에 의해 호출되는 키다운이벤트를 수신합니다.차체에 키를 고정하고customEvent선택한 키다운이벤트<div>누군가에게 도움이 될 때를 대비해서 공유하는 것.

이 질문이 꽤 오래됐다는 건 알지만, 이 답변이 누군가에게 도움이 될 수도 있어요.선언적 커스텀이벤트 jsx-native-events를 추가한 React용 JSX 플러그마를 작성했습니다.

, the the를 합니다.onEvent<EventName>이치노

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

언급URL : https://stackoverflow.com/questions/21951734/react-js-custom-events-for-communicating-with-parent-nodes