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

第二个参数被视为道具，但它应该是一个对象。你会像

那样传递它

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

React-Chat-Widget道具未转发

1 个答案: