Как связать два child компонента в react js?

Question

[qo_0p]

Есть два child компонента с одним родителем, как их связать что бы при активации одного child компонента (например нажатие кнопки), изменялся второй child компонент (например текст)?

Answer 1

[lemme]

class Parent extends Component {

	constructor() {
		super();
		this.state = {
			text: ''
		};
	}

	// Ссылку на этот метод будем передавать в Button компонент.
	buttonClick() {
		this.setState({ text: Date.now() });
	}
	
	render() {
		return (
			<div>
				// Ну, а тут передаем состояние text (родительского компонента) через props в дочерний (Text)
				<Text text={ this.state.text } />
				<Button onClick={ () => this.buttonClick() }/>
			</div>
		);
	}
}

function Button(props) {
	return <button onClick={ props.onClick }>Click me</button>
}

function Text(props) {
	return <span>{ props.text }</span>
}

Comments

[qo_0p]

а в дочерних элементах рендера нет?

[lemme]

qo_0p: рендером является функция (Button, Text).

Т.е вот так можно записать компонент Text (это аналогично). Просто, если в компоненте нет никакой логики, зачем его записывать классом?

class Text extends Component {
	render() {
		return <span>{ this.props.text }</span>
	}
}