javascript - React-Chat-Widget Prop 未转发

Question

我正在使用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 方法的文档指出要渲染的组件的第二个参数是组件需要(在本例中为父类函数)。

我哪里出错了？

Answer 1

第二个参数被视为 props，但它应该是一个对象。你会像这样传递它

handleNewUserMessage = (newMessage) => {
      renderCustomComponent(Reply, {correct: this.correct});
}