在不使用渲染功能的情况下，将子组件的状态设置为 ReactJs 中的父组件答案

【问题标题】：setState of child component to a parentComponent in ReactJs without using render function在不使用渲染功能的情况下，将子组件的状态设置为 ReactJs 中的父组件
【发布时间】：2018-02-16 00:41:42
【问题描述】：

我有一个父组件

var ViewUser = React.createClass({
  getInitialState: function () {
     return {
         ChatMembers: [],
          Messages: []
      };
 }
}

还有一个子组件，我在其中使用套接字获取我的对话消息，并更改成功的消息状态

  var SideMembers = React.createClass({
     render: function () {
      return (
        <div className="media-body" onClick={this.StartChat} />)
 },
StartChat: function (e) {
    e.preventDefault();
    socket.emit('Get-chat', {
        Conversationid: chatID
    });
    socket.on('Chat-History', function (data) {
        this.setState({ Messages: data });
    }.bind(this));
 }

但是现在我想将ViewUser的状态设置为SideMembers的当前状态而不使用渲染函数

【问题讨论】：

“不使用渲染功能”是什么意思？
喜欢通过调用函数并将 SideMembers 的 props 发送给 ViewUser

标签： reactjs sockets

【解决方案1】：

你需要使用道具并从子函数SideMembers调用一个函数

//Require Child component = SideComponent
var ViewUser = React.createClass({
getInitialState: function () {
 return {
     ChatMembers: [],
      Messages: []
  };
 }
},

updateState:function(date){
this.setState({Messages:data.Messages});
},

render:function(){
  return(
   <SideComponent
      updateState={this.updateState}   
      )
 }

现在在子组件中调用发送数据的函数

var SideMembers = React.createClass({
 render: function () {
  return (
    <div className="media-body" onClick={this.StartChat} />)
 },
     StartChat: function (e) {
    e.preventDefault();
    socket.emit('Get-chat', {
    Conversationid: chatID
         });
     socket.on('Chat-History', function (data) {
       this.setState({ Messages: data });
       var msg = this.state;
       this.props.updateState(msg);
     }.bind(this));
 }

希望它会起作用:)

【讨论】：

【解决方案2】：

我认为您想从子组件 - SideMembers 更新父组件 - ViewUser。

为了实现这一点，您需要从ViewUser 传递一个函数

var ViewUser = React.createClass({
  getInitialState: function () {
    return {
      ChatMembers: [],
      Messages: []
    };
  }
  
  updateState: function(newMessages) {
    this.setState(Messages: newMessages);
  }
}

（假设您要更新Messages）

将updateState 传递给SideMembers：<SideMembers ... updateViewState={this.updateState} />

那么在SideMembers里面你可以调用this.props.updateViewState来更新ViewUser的状态

更新示例

var SideMembers = React.createClass({
  render: function () {
    return (
      <div className="media-body" onClick={this.StartChat} />
    )
  },
  
  StartChat: function (e) {
    e.preventDefault();
    socket.emit('Get-chat', {
        Conversationid: chatID
    });
    socket.on('Chat-History', function (data) {
        this.setState({ Messages: data });
        this.props.updateViewState(data);
    }.bind(this));
  }
}

【讨论】：

是的，但如何准确调用函数？从 StartChat 函数中
@YahyaAhmed：答案已更新。请确保进行一些调整以符合您的逻辑。