事件發送器和用戶ES6語法與反應本地

我想實現事件發送器/訂閱者關係在兩個組件之間的反應原生類。我見過參考下列材料：事件發送器和用戶ES6語法與反應本地

這些解決方案是足夠的什麼，我試圖完成，然而，他們懶得需要接收組件上使用的mixins: [Subscribable.Mixin]與Subscriber正常工作。不幸的是，我使用ES6並從Component擴展我的類，所以我不能使用這個mixin語法。

我的問題是：如何在不使用mixin的情況下在ES6中實現上述解決方案？

來源

2016-04-21 Adam Jakiela

這裏有人建議使用簡單地使用寫組件的「老辦法」：http://hi-tips.tumblr.com/post/137014836571/use-eventemitter-for-calling-child-component -event 我有同樣的問題，並想知道是否有任何適當的方式在ES6中做這個 –

我仍然在尋找這個。我不願意開始使用'react-mixin'。 – Tom

。

簡單的演示：

import EventEmitter from 'EventEmitter'; 

let x = new EventEmitter(); 

function handler(arg) { 
    console.log(`event-name has occurred! here is the event data arg=${JSON.stringify(arg)}`); 
} 

x.addListener('event-name', handler); 

x.emit('event-name', { es6rules: true, mixinsAreLame: true });

爲addListener完整簽名需要三個參數：

EventEmitter.addListener(eventName, handler, handlerContext)

在反應組件，您可能希望使用此背景下阿根廷，從而使處理器可以類方法，而不是內聯函數，仍然保留this == component instance。例如： -

componentDidMount() { 
    someEmitter.addListener('awesome', this.handleAwesomeEvents, this); 
    // the generalist suggests the alternative: 
    someEmitter.addListener('awesome', this.handleAwesomeEvents.bind(this)); 
} 

handleAwesomeEvents = (event) => { 
    let awesomeness = event.awesomeRating; 

    // if you don't provide context in didMount, 
    // "this" will not refer to the component, 
    // and this next line will throw 
    this.setState({ awesomeness }); 
};

FYI：我從看決然unmagical實施the infamous Subscribable mixin得到這個。 Google的搜索結果基本上是Ramsay單個混音演示的回聲室。

P.S.至於將這個發射器暴露給另一個器件，我可能會擁有擁有的器件提供用於接收發射器參考的功能，並且創建發射器的組件將隨後有條件地用發射器執行該道具。

// owner's render method: 
<ThingThatEmits 
    onEmitterReady={(emitter) => this.thingEmitter = emitter} 
/> 

// inside ThingThatEmits: 
componentDidMount() { 
    this.emitter = new EventEmitter(); 

    if(typeof this.props.onEmitterReady === 'function') { 
     this.props.onEmitterReady(this.emitter); 
    } 
}

來源

2016-09-22 19:10:09 Tom

謝謝！你的'簡單演示'正是我需要看到的點擊。 – iksnae

嗨湯姆，當我嘗試調用'let test = new EventEmitter（）;'它拋出未定義不是一個構造函數（評估'new _reactNative.EventEmitter（）'）'有關這個的任何想法？ – Richard

@理查德：無。您使用的是什麼版本的反應 - 本機？你確定你輸入正確嗎？你有沒有嘗試重新啓動你的RN包裝機？這是構建時還是運行時失敗？ – Tom

我能用react-mixin得到解決方法。不知道它有多適當，但它沒有任何修改。關鍵是在類定義之後添加reactMixin(DetailView.prototype, Subscribable.Mixin);。

去關閉該浮動周圍EventEmitter和可訂閱的例子：你不需要混入使用EventEmitters

'use strict'; 

var reactMixin = require('react-mixin'); 
var React = require('react-native'); 
var EventEmitter = require('EventEmitter'); 
var Subscribable = require('Subscribable'); 

var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    NavigatorIOS 
} = React; 

class MainView extends Component { 
    constructor(props){ 
     super(props); 
     this.EventEmitter = new EventEmitter(); 
    } 

    somethingHappenedFunction(){ 
     this.EventEmitter.emit("update_event", { message: "hello from up here"}); 
    } 

    //rest of the class 
} 

class DetailView extends Component { 
    componentDidMount(){ 
    this.addListenerOn(this.props.events, 'update_event', this.miscFunction); 
    } 

    miscFunction(args) { 
    console.log("message: %s", args.message); 
    } 

    //rest of the class 
} 
reactMixin(DetailView.prototype, Subscribable.Mixin);

來源

2016-06-06 23:36:36 georges

事件發送器和用戶ES6語法與反應本地

回答

相關問題