Javascript 从套接字IO侦听器访问React组件

当我监听

'new-message'

事件时，我试图调用我的

仪表板

组件的

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

但是，我得到一个错误：

uncaughttypeerror:Dashboard.createMessage不是函数

是否有方法从组件外部访问
仪表板
createMessage
方法

或者，是否有办法让
仪表板
组件
始终侦听事件，我可以执行以下操作：

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

您可以用插座或标签包装仪表板组件

示例代码：

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

类SocketListener扩展了React.Component{
状态={
信息：[]
}
componentDidMount（）{
socket.on（'new-message'，（数据）=>{
this.setState（{messages:this.state.messages.concat（数据）}）
});
}
render（）{
返回(
)
}
}

这样，您的仪表板组件就不需要知道有关消息的任何信息