按下子组件按钮时的反应 Redux 如果 websocket 客户端位于父组件中，如何让 websocket 客户端发送

Question

在我的父组件中，我有

componentWillReceiveProps(nextProps) {
if(nextProps.message) {
websocket.send(JSON.stringfy(nextProps.message));
}
}

我的子组件在单击时具有此按钮，它运行此方法：

onClickButton = () => {
// My action dispatcher for reducer
this.props.sendMessage(this.props.data);
}

我的思考过程是将某些内容从子组件传递到父组件 - 我将利用商店。因此，每当单击父组件的子组件(即列表(中的按钮时，父组件都可以访问来自子组件的数据。我这样做的原因是因为 websocket 客户端位于父组件上。

问题是，当子组件中的按钮在父组件中运行组件WillReceiveProps(nextProps(方法时被单击;

但是，当我再次单击它时，它不会运行。我知道有效负载不会改变，但会再次设置为相同的东西，所以我认为当单击按钮后再次调用调度操作时，它至少会在父运行中再次运行组件 WillReceiveProps(nextProps( 方法？

有没有办法必须拥有它，以便当我单击子组件的按钮时 - 父组件中的 websocket 发送单个子组件的数据？

本质上，我希望在单击子组件中的按钮时让 websocket 客户端向服务器发送消息

Answer 1

也许思考问题的另一种方法是简单地将函数sendMessageToServer和data作为 props 传递给子组件。 作为一个功能组件，它看起来像这样：

export default function Parent() {
// this child component doesnt have to be here, can be imported or declared outside of this Parent functional component. it's here for demo purposes.
const Child = ({ data, sendMessageToServer }) => {
return <button onClick={() => sendMessageToServer(data)}>Send Data</button>;
};
const websocket = {
send(msg) {
console.log(msg);
}
};
const sendMessageToServer = msg => {
websocket.send(JSON.stringify(msg));
};
const data = { msg: "message from parent" };
return (
<div className="App">
<Child {...{ data, sendMessageToServer }} />
</div>
);
}

这样，只要在子级中单击按钮，函数就会在父级的作用域中执行。 当然，这也可以编写为类组件。 为了便于说明，我认为功能组件更容易理解。