Как изменить state дочернего компонента из вне в react?

Question

[exxagw]

Каким образом можно изменить дочерний state из родительских функций?
К примеру есть сокеты, во время принятия сообщения из сокета ( socket.on('test', function(data)..... ) нужно засунуть это сообщения в history компонента Dialog. Внутри dialog'а вешать не хорошо, т.к. если в data.dialog_id из сокета != Dialog.dialog_id мне не нужно обновлять историю переписке.

Видимо я ничего не понимаю в react, первый день копаюсь, вест стак перерыл.. Люди добрые помогите)

var Dialog = React.createClass({

	getInitialState() {
		return {
			id: 0,
			history: [],
		};
	},

	_insertMessage(data){
		if(!data) data = {user: 1, text: 'test'};
		var history = this.state.history;
		history.push(data)
		this.setState({ history: history })
	},

	render() {
		return (
			<div>
				<h3>Диалог: {this.state.id}</h3>
				<div>
					{
						this.state.history.map((message, i) => {
							return (
								<Message
									key={i}
									user={message.user}
									text={message.text}
								/>
							);
						})
					}
				</div>
			</div>
		);
	}
});



var App = React.createClass({
	componentDidMount() {
		socket.on('test', function(data){
			
		}
	},
	render() {
		return (
			<div>
				<Dialog  />
			</div>
		);
	}
});

ReactDOM.render(<App />, document.getElementById('app'));

Answer 1

[Павел Щеглов]

По идее вот в этом куске и можно менять state

componentDidMount() {
    socket.on('test', function(data){
      this.setState({/* ....... */});
    }
  }.bind(this),

И перекинуть измененный sate (нужный кусок через props)

render() {
    return (
      <div>
        <Dialog someval={this.state.someval} />
      </div>
    );
  }

Comments

[exxagw]

крайне хочется, что бы менялся стейт Dialog, а не App передавал свой в Dialog

[exxagw]

ну и у dialog может быть уже не пустой history, и при получении сообщения из сокета нужно Dialog.history.push(data)...

[Павел Щеглов]

Тогда вызывайте componentDidMount(){socket.on....} в Dialog

если в data.dialog_id из сокета == Dialog.dialog_id - вызывайте setState иначе - нет

[exxagw]

Павел Щеглов: тут уже проблема. если data.dialog_id из сокета != Dialog.dialog_id мне нужно обновить другой компонент :) список диалогов.

[Павел Щеглов]

exxagw: Вешайте событие на список диалогов. Передавайте новые сообщения через props, и у Dialog дополняйте state новыми сообщениями с помощью componentWillReceiveProps(nextProps)

Answer 2

[Антон]

Для этого есть props

Answer 3

[Dzhakhar Ukhaev]

Ответ Павел Щеглов в принципе правильный, за исключением того что вы в этом месте

componentDidMount() {
    socket.on('test', function(data){
      this.setState({/* ....... */});
    }
  }.bind(this),

получите ошибку this.setState is not a function , вне callback-а вы должны переопределить this, например так let self = this; и внутри функции сменить this.setState на self.setState.

Это произойдет потому что каждая функция имеет свой собственный контекст, к которому вы обращаетесь через this, и в callback-е this уже не ссылается на ваш компонент.

Comments

[Павел Щеглов]

Да bind(this) не туда прицепил я - надо было скобочкой выше и тогда let self = this - не понадобится

[Dzhakhar Ukhaev]

Павел Щеглов: Не обратил внимания, интересное решение