我正在使用react-chat-widget并尝试从小部件的 renderCustomComponent
函数呈现的自定义组件中调用我的应用程序基类中的函数。
这是基类的代码:
import React, { Component } from 'react';
import { Widget, handleNewUserMessage, addResponseMessage, addUserMessage, renderCustomComponent } from 'react-chat-widget';
import 'react-chat-widget/lib/styles.css';
import Reply from './Reply.js';
class App extends Component {
handleNewUserMessage = (newMessage) => {
renderCustomComponent(Reply, this.correct);
}
correct = () => {
console.log("success");
}
render() {
return (
<div className="App">
<Background />
<Widget
handleNewUserMessage={this.handleNewUserMessage}
/>
</div>
);
}
}
export default App;
这是自定义组件Reply
的代码:
import React, { Component } from 'react';
import { Widget, addResponseMessage, renderCustomComponent, addUserMessage } from 'react-chat-widget';
class Reply extends Component {
constructor(props) {
super(props);
}
sendQuickReply = (reply) => {
console.log(this.props); //returns empty object
//this.props.correct(); <-- should be called
};
render() {
return (
<div className="message">
<div key="x" className={"response"}onClick={this.sendQuickReply.bind(this, "xx")}>xx</div>
</div>)
}
}
export default Reply;
根据ReactJS call parent method这应该有效。但是,当我打印 this.props
对象时,它是空的,尽管 renderCustomComponent
方法的文档指出要渲染的组件的第二个参数是组件需要(在本例中为父类函数)。
我哪里出错了?
最佳答案
第二个参数被视为 props,但它应该是一个对象。你会像这样传递它
handleNewUserMessage = (newMessage) => {
renderCustomComponent(Reply, {correct: this.correct});
}
关于javascript - React-Chat-Widget Prop 未转发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50509690/