Два компонента в реакции могут взаимодействовать следующим образом
Родитель -> Дочерний компонент через реквизиты
Ребенок -> Родитель с помощью обратного вызова
Child -> Child с помощью родительского компонента шкафа
Например:
import React, {Component} from 'react';
class Parent extends Component {
constructor() {
super()
this.state = {
name: "John Doe"
}
this.changeName = this.changeName.bind(this)
}
changeName(newName) {
this.setState({
name: newName
})
}
render() {
return (
<div>
// passing data from parent component to child component using props
// name={this.state.name} changeName={this.changeName}
<Child name={this.state.name} changeName={this.changeName} />
<SecondChild name={this.state.name} />
</div>
)
}
}
function Child(props) {
return (
<div>
<h1>My name in Child Component is: {props.name} </h1>
// passing data from child component to parent component using Callback
// onClick={() => props.changeName('Jeremy Smith')}
<button onClick={() => props.changeName('Jeremy Smith')}>Change Name</button>
// when button is clicked "Jeremy Smith" is passed to parent component and
// from their passed to both Child and SecondChild components
// this way we communicate between two child components
</div>
)
}
function SecondChild(props) {
return <h1>My Name in Second Child Component is: {props.name}</h1>
}
Дополнительно
Вы также можете использовать React Context API для передачи данных в дочерние компоненты.
Или используйте библиотеку управления состояниями, например, redux, для создания единого общего хранилища и передачи необходимых данных компонентам.