的setState子組件在ReactJs一個爲父級，而無需使用渲染功能

Question

我有一個父組件

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當前狀態，而不使用渲染功能

Answer 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)); 
} 

希望這將工作:)

Answer 2

我想你想更新父組件 - ViewUser從子組件 - SideMembers。

爲了做到這一點，你需要從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狀態

---

UPDATE例如

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)); 
 
    } 
 
}