Sự kiện tùy chỉnh react.js để giao tiếp với các nút cha

Tôi đang tạo và lắng nghe các DOM thông thường CustomEventgiao tiếp với các nút cha:

Ở trẻ em:

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

Trong cha mẹ:

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

Điều này hoạt động, nhưng có cách nào dành riêng cho React sẽ tốt hơn không?

Như đã nói ở trên:

Cách React sẽ là chuyển các lệnh gọi lại cho trẻ em một cách rõ ràng thông qua đạo cụ -. Không có hỗ trợ cho các sự kiện tùy chỉnh w / foam trong React.

Phần trừu tượng lập trình phản ứng là trực giao:

Việc lập trình các hệ thống tương tác bằng mô hình quan sát là khó và dễ xảy ra lỗi nhưng vẫn là tiêu chuẩn thực hiện trong nhiều môi trường sản xuất. Chúng tôi trình bày một cách tiếp cận để dần dần phản đối những người quan sát mà ủng hộ các lập trình trừu tượng phản ứng. Một số lớp thư viện giúp các lập trình viên di chuyển mã hiện có một cách suôn sẻ từ các lệnh gọi lại sang một mô hình lập trình khai báo hơn.

Thay vào đó, triết lý của React dựa trên Command pattern:

Người giới thiệu

• Không chấp nhận Mẫu trình quan sát
• Mẫu lệnh: Lịch sử lệnh
• Tương tác thành phần với các phần tử phản ứng và tùy chỉnh
• Xây dựng Redux trong TypeScript
• Mithril khác với các Framework khác như thế nào - Mithril

bạn có thể viết một dịch vụ đơn giản và sau đó sử dụng nó

/** 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];
  },
};

ví dụ (tương tự cho việc kích hoạt)

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

Bạn có thể làm nổi bật các sự kiện thông qua các lệnh gọi lại được truyền lại qua các ngữ cảnh: [CodePen]

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;

Có một cái khác mà tôi thấy cũng khá hợp lý, đặc biệt là nếu việc khoan lỗ từ cha mẹ sang con cái đã trở nên cồng kềnh rồi. Ông gọi đó là giao tiếp ít đơn giản hơn. Đây là liên kết:

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

Một giải pháp khả thi, nếu bạn nhất thiết phải sử dụng mẫu Observer trong ứng dụng ReactJs, bạn có thể chiếm quyền điều khiển một sự kiện bình thường. Ví dụ: nếu bạn muốn khóa xóa gây ra một sự <div>kiện được đánh dấu để xóa, bạn có thể <div>nghe sự kiện khóa xuống sẽ được gọi bởi customEvent. Bẫy phím xuống trên cơ thể và gửi một customEventsự kiện phím xuống trên phần đã chọn <div>. Chia sẻ trong trường hợp nó giúp một ai đó.

Một cửa hàng trung tâm [Redux] phân phối trạng thái cho khách hàng, trạng thái 'điều phối' sau đó sao lưu tới cửa hàng cũng giống như một mẫu quan sát. Một cách thực hiện xuất bản / đăng ký chỉ tồi tệ hơn vì các đường dẫn kết nối đạo cụ / sự kiện rõ ràng (giòn?). Để tấn công thông qua hệ thống phân cấp, React cung cấp ngữ cảnh (mẫu nhà cung cấp) hoặc các thư viện có thể quan sát được. Như MobX giới thiệu trình trang trí mới @observable hoặc Vue giới thiệu cú pháp mẫu mới "v-if". Sự kiện là cách chính của DOM và vòng lặp sự kiện javascript hoạt động, vậy tại sao không? Tôi nghĩ các satanists đã làm điều đó. Cười lớn

Tôi nhận ra rằng câu hỏi này đã khá cũ cho đến nay, nhưng câu trả lời này vẫn có thể giúp ích cho ai đó. Tôi đã viết một pragma JSX cho React có thêm sự kiện tùy chỉnh khai báo: jsx-native-events .

Về cơ bản, bạn chỉ sử dụng onEvent<EventName>mẫu để xem các sự kiện.

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