@exxagw

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

Каким образом можно изменить дочерний 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'));
  • Вопрос задан
  • 1184 просмотра
Пригласить эксперта
Ответы на вопрос 3
По идее вот в этом куске и можно менять state
componentDidMount() {
    socket.on('test', function(data){
      this.setState({/* ....... */});
    }
  }.bind(this),


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

render() {
    return (
      <div>
        <Dialog someval={this.state.someval} />
      </div>
    );
  }
Ответ написан
SPAHI4
@SPAHI4
реактовцы - это не девы, а прокидыватели пропсов
Для этого есть props
Ответ написан
@dzhakhar1209
Web Developer, Front end developer
Ответ Павел Щеглов в принципе правильный, за исключением того что вы в этом месте
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 уже не ссылается на ваш компонент.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы