Как я могу инициировать действия между братьями и сестрами в React Native?
export default class Parent extends Component {
render() {
return (
<View>
<Sibling1/>
<Sibling2/>
</View>
);
}
}
Допустим, пользователь касается sibling1, и я хочу, чтобы sibling2 в результате стал зеленым. Этот учебник объясняет, как я могу передавать информацию между братьями и сестрами, но не как я могу заставить принимающий компонент понять, что изменение произошло:
Not surprisingly, to pass data between siblings, you have to use the parent as an intermediary. First pass the data from the child to the parent, as an argument into a callback from the parent. Set this incoming parameter as a state on the parent component, then pass it as a prop to the other child (see above example). The sibling can then use the data as a prop.
Я глубоко сбит с толку, почему React Native не сделает такую вещь интуитивно понятной и простой, поскольку это чрезвычайно распространенная потребность в любом приложении и совершенно тривиальная задача, которую можно выполнить в браузере с помощью базовой библиотеки, такой как JQuery.
Как я могу инициировать действия между братьями и сестрами в React Native?
Поток данных в react - parent <-> child. Поэтому, если вам нужно общаться между братьями и сестрами и запускать действия, вам нужно пройти через родителя. Другой вариант - Redux или ContextAPI. Все дело в управлении государством.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Используйте componentWillReceiveProps lifeCycle, чтобы получать уведомление о том, когда компонент получает обновление для одного или нескольких своих свойств.
export default class Parent extends Component {
render() {
return (
<View>
<Sibling1 onClick = {() => this.setState({ color: '#00ff00')}/>
<Sibling2 color = {this.state.color} />
</View>
);
}
}
export default class Sibling2 extends Component {
componentWillReceiveProps(nextProps) {
if (nextProps.color != this.state.color) {
// here you know the changed ocurred
this.setState({ color: nextProps.color });
}
}
render() {
return (this.state.color);
}
}
При запуске setState из Sibling1Sibling2 никогда ничего об этом не узнает. state является частным и не разделяется между компонентами.
setState запустит Parent, это состояние Parent, которое будет обновлено, что вызовет повторный рендеринг и, следовательно, рендеринг Sibling2 с новой опорой. Этот код ничего не делает с состоянием Sibling1
setState не запускает Parent. Вам необходимо передать свойство Function от Parent к Sibling, и эта функция должна отвечать за изменение Parentstate.
то есть функция стрелки передается вниз к Sibiling1, функции стрелок - это лишь краткое изложение того, что вы говорите.
Простите меня, если это действительно тривиально, но я новичок, чтобы отреагировать. Пока не понимаю, насколько это будет тривиально.