Question

我在使用下面提供的代码通过回调发送操作时遇到问题。代码不会发送操作。但是，我知道如果我将属性Connected附加到诸如onClick之类的处理程序，它将会执行。如何在没有这些处理程序的情况下使我的代码工作？

（注意：在这个例子中，我使用了来自npm的MQTT.js库）。

每次通过MQTT通过套接字接收连接消息时，我希望它在成功连接时更新存储以告知前端。但是，我需要将组件保留为组件，而不是容器。

父：

return (
  <MQTT
    Connected={() => {this.props.sendAction('MQTT_CONNECTED')}}
  >
)

子：

const MQTT = ({Connected}) => {
  var client  = mqtt.connect(mqttBroker, mqttConnectOptions);
  client.on('connect', function() {
    {Connected}
  }
  return <div>...</div>;
}

sendAction：

export function sendAction(action) {
  return {
    type: action
  }
}

Answer 1

我犯了一个错误并忘记了{Connected（）}中的括号。孩子应该是这样的：

const MQTT = ({Connected}) => {
  var client  = mqtt.connect(mqttBroker, mqttConnectOptions);
  client.on('connect', function() {
    {Connected()}
  }
  return <div>...</div>;
}

Answer 2

你有什么理由可以调用你作为道具传下去的Connected函数吗？

const MQTT = ({Connected}) => {
  var client  = mqtt.connect(mqttBroker, mqttConnectOptions);
  client.on('connect', function() {
    this.props.Connected()
    return <div>...</div>;
  }
  return null;
}

与Redux反应：将函数传递给子组件，在子组件中调用不带处理程序

2 个答案: