Управление состоянием списка элементов - React Native
У меня 2 компонента. Мы назовем их parent component и child component. Итак, в родительском компоненте я отображаю группу объектов следующим образом.
<ScrollView style = {[styles.container]}>
{userFriendsList.length > 0
&& userFriendsList.map(reviewer => (
<Child reviewer = {reviewer} key = {reviewer.id}
addToArray = {this.addToArray.bind(this)}
removeFromArray = {this.removeFromArray.bind(this)}/>
))}
</ScrollView>
Ниже приведен мой дочерний компонент
class Child extends Component {
constructor() {
super();
this.state = {
added: false
}
}
//Send data to parent component
handleSendingData(reviewer) {
this.setState({
added: !this.state.added
}, () => {
if (this.state.added === true) {
this.props.addToArray(data)
} else {
this.props.removeFromArray(data.reviewerId)
}
});
const data = {
reviewerId: reviewer.id,
reviewerName: reviewer.name,
reviewerImage: reviewer.url
};
}
render() {
const {reviewer} = this.props;
return (
<TouchableOpacity style = {styles.addtogroupcard} onPress = {() => this.handleSendingData(reviewer)}>
<Image source = {{uri: `${imageEnv}${reviewer.url}`}} style = {styles.friendimg}/>
<Text style = {styles.friendname}>{reviewer.name}</Text>
{this.state.added ? <Icon name = "ios-checkmark-outline" style = {styles.friendaddicon}/> :
<Icon name = "ios-add-circle-outline" style = {styles.friendaddicon}/>
}
</TouchableOpacity>
);
}
}
Как видите, я изменяю состояние своего дочернего компонента, чтобы отображать разные значки в соответствии с состоянием.
{this.state.added ? <Icon name = "ios-checkmark-outline" style = {styles.friendaddicon}/> :
<Icon name = "ios-add-circle-outline" style = {styles.friendaddicon}/>
}
Как я могу изменить это состояние в родительском компоненте? Правильно ли здесь использовать сокращение?
Ответы 2
Да, Redux поможет вам легко управлять всем состоянием вашего приложения, но вы также можете делать то, что вам нужно, используя также реакцию. Если вы хотите вызвать функцию, которая устанавливает состояние, которое находится в вашем дочернем компоненте, также из вашего родительского компонента. Это можно сделать с помощью ref's в react. Вот пример:
//Parent component
import React from 'react';
import Child from './child.js';
class Parent extends React.Component {
render() {
return (
<div onClick = {this.child.func();}>
<Child ref = {instance => { this.child = instance; }}/>
</div>
)
}
}
export default Parent;
Дочерний компонент:
import React from 'react';
class Child extends React.Component {
func = () => {
console.info('child');
// here you can set state;
}
render(){
return(
<div>
child component
</div>
)
}
}
export default Child;
как функция changePlayer связана с родительским компонентом?
В общем, лучший способ управлять состоянием в таких дочерних / родительских отношениях - это хранить состояние в родительском элементе. К каким бы объектам состояния детям ни требовался доступ, они должны передаваться в качестве опоры. Если дочернему элементу необходимо изменить состояние, передайте дочернему элементу функцию от родителя в качестве опоры.
решена ли ваша проблема, если да, примите ответ, который ее решил!