Zugang Reagieren Komponente von Socket IO Hörer

Question

Wenn ich für ein 'new-message' Ereignis hören Ich versuche, meine Dashboard Komponente createMessage Funktion aufzurufen:

var socket = io.connect() 

socket.on('new-message', (data) => { 
    console.log("ALL CLIENTS SHOULD GET THIS MESSAGE") 
    Dashboard.createMessage(data.id, data.body, data.context, data.urgent, data.customContext) 
}) 

const Dashboard = React.createClass({ 

    createMessage: function(id, body, context, urgent, customContext) { 

    this.setState({ 
     messages: [ 
     ...this.state.messages, 
     {id: id, user_id: this.state.currentUser, body: body, context: context, urgent: urgent, customContext: customContext} 
     ] 
    }) 
    } 
    }) 

Allerdings bekomme ich einen Fehler: Uncaught TypeError: Dashboard.createMessage is not a function

Gibt es eine Weg, um die DashboardcreateMessage Methode von außerhalb der Komponente zugreifen?

Alternativ ist es eine Möglichkeit, die Dashboardcomponent immer hören, für eine Veranstaltung zu haben, und ich kann etwas tun:

var socket = io.connect() 

const Dashboard = React.createClass({ 

    alwaysListenForEvent: function() { 
     socket.on('new-message', (data) => { 
      console.log("ALL CLIENTS SHOULD GET THIS MESSAGE") 
      this.createMessage(data.id, data.body, data.context, data.urgent, data.customContext) 
     }) 
    } 

    createMessage: function(id, body, context, urgent, customContext) { 

    this.setState({ 
     messages: [ 
     ...this.state.messages, 
     {id: id, user_id: this.state.currentUser, body: body, context: context, urgent: urgent, customContext: customContext} 
     ] 
    }) 
    } 
    }) 

Answer 1

Sie Ihre Dashboard-Komponente mit einem Sockel wickeln könnte HoC oder container component.

Beispielcode:

class SocketListener extends React.Component { 
    state = { 
    messages: [] 
    } 
    componentDidMount() { 
    socket.on('new-message', (data) => { 
     this.setState({ messages: this.state.messages.concat(data) }) 
    }); 
    } 

    render() { 
    return (
     <Dashboard 
     messages={this.state.messages} 
     /> 
    ) 
    } 
} 

Auf diese Weise Ihre Dashboard-Komponente braucht nichts über die Nachrichten zu kennen.