将 Props 回调与 react native 一起使用

Question

我想知道如何用反应原生传递回调。

目前我有 3 个组件：

消息类型文本.js -> 消息按钮.js -> 消息按钮.js

1 消息按钮.js

export default class MessageButton extends React.Component {
clickButton(button) {
console.log('message button');
this.props.callBackFunction('PAYLOAD' , button.payload);
}
render() {
let button = this.props.button;
return (
<TouchableOpacity onPress={() => this.clickButton(button)}>
<Text>
{ button.title }
</Text>
</TouchableOpacity>
);
}
}

2 消息按钮.js

export default class MessageButtons extends React.Component {
sendMessageToAPI(messageType, data) {
console.log('message buttons');
this.props.callBackMessageButtons(messageType , data);
}
renderButtons(buttons) {
return(buttons.map((button, indexButton) => {
return <MessageButton key={indexButton}
button={button}
callBackFunction={this.sendMessageToAPI} />
}))
}
...
}

3 消息类型文本.js

export default class MessageTypeText extends React.Component {
sendMessageToAPI(messageType, data) {
console.log('message type text');
//this.props.callBackFunction(messageType , data);
}
renderButtons(message) {
if(...){
return (<MessageButtons buttons={message.attachment.payload.buttons}
callBackMessageButtons={this.sendMessageToAPI} />)
}
}
...
}

当我单击组件MessageButton中的可触摸不透明度时.js(更深入(，我在控制台中看到：

消息按钮， 消息按钮

但我没有看到：

消息类型文本

我有这个错误：

无法读取未定义的属性"callBackMessageButtons"(MessageButtons.js(第 10 行(

我可以在MessageButton中执行this.props.callBackMessageButtons(messageType ， data(.js

我在渲染中使用箭头函数，但我总是有这个错误。

Answer 1

不要忘记绑定回调。或者只使用箭头功能：

sendMessageToAPI = (messageType, data) => {
console.log('message buttons');
this.props.callBackMessageButtons(messageType , data);
}

这是使this按预期在回调中工作所必需的。