访问从插座IO听众

Question

阵营组件当我听到一个'new-message'事件我想打电话给我Dashboard组件的createMessage功能：

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} 
     ] 
    }) 
    } 
    }) 

但是，我得到一个错误：Uncaught TypeError: Dashboard.createMessage is not a function

是否有从组件外部访问DashboardcreateMessage方法的方法？

或者是有办法有Dashboardcomponent总是监听事件，我可以做这样的事情：

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

你可以用一个Socket HoC或container component包装你的仪表板组件。

示例代码：

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} 
     /> 
    ) 
    } 
} 

这样，你的仪表板组件并不需要知道消息什么。