React-Chat-Widget中renderCustomComponent无法传递props问题求助

问题描述 #

我正在使用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); //返回空对象 
    //this.props.correct(); <-- 应调用该方法 
  }; 

  render() { 
    return ( 
      <div className="message"> 
        <div key="x" className={"response"} onClick={this.sendQuickReply.bind(this, "xx")}>xx</div> 
      </div>) 
  } 
} 

export default Reply;

按照React调用父组件方法的常规方案，这个逻辑应该可行，但打印this.props时返回空对象。虽然renderCustomComponent文档说明第二个参数是组件所需props（此处为父类函数），但我不知道哪里出错了？

问题分析与解决办法 #

你这里的问题出在传递props的方式不对。renderCustomComponent的第二个参数需要是一个props对象，而不是直接传递函数本身。你现在直接传了this.correct，相当于把函数作为整个props对象传给了Reply组件，但Reply组件期望的是props里有一个correct属性。

修改步骤： #

1. 在App组件的handleNewUserMessage方法中，把第二个参数改成包含correct属性的对象：

handleNewUserMessage = (newMessage) => { 
  // 这里要传一个props对象，把correct方法作为属性传进去
  renderCustomComponent(Reply, { correct: this.correct }); 
}

2. 这样在Reply组件中，就能通过this.props.correct拿到父组件的方法了，修改sendQuickReply方法：

sendQuickReply = (reply) => { 
  console.log(this.props); // 现在能看到包含correct方法的对象了
  this.props.correct(); // 可以正常调用父组件的方法了
};

为什么之前不行？ #

当你直接传递this.correct给renderCustomComponent时，Reply组件的props就等于这个函数本身，而不是一个包含该函数的对象。所以在Reply里this.props其实是那个函数，而不是你预期的对象，自然打印出来不是你想要的结果，也无法通过this.props.correct访问到方法。

这样修改后，就能正常从自定义组件调用父组件的方法啦。

内容的提问来源于stack exchange，提问作者Fabian Schneider